Tabs

Tabs are a UI component used for organizing information by showing one grouping of information while hiding other related items at the same time.

Some quick things to follow when using tabs:

Never nest tabs (never have tabs within tabs within the same content section)
Only show read-only information within tabs (no data entry)
Everything underneath the tab group belongs to the active tab and the tabs should fall on the grey background.
Tabs in a single “tile”/white container are easier to understand and manage. Use header levels to distinguish information under a tab
Limit number of tabs to 7 or less

Last updated: Jul 2018