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.