Tabs

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.

Set of three tabs, the first is selected

Usage

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
Example of page with a tile on top and tabs underneath

Last updated: Jul 2018

Next: Tooltips