COMPONENTS
Tabs
Tabs organize related content and allow navigation between the groups of content within a container on the same page.
- Tab Item
- Active Tab Item
- Tab Group
- Separator
- Selected Tab Content
There are five types of tab items that can be used in either horizontal or vertical orientation — text only, text with menu, leading icon, leading icon with menu, and icon only.
A tab group can have either horizontal or vertical orientation.
A horizontal tab group can be aligned to the left, center or right within its outer container.
The tab items within a tab group can be set to have equal widths. The tab items will then be distributed equally across the container.
Equal width tabs can be clustered by setting a maximum width for the tab group inner container. The clustered tabs can then be aligned to the left, center or right within its outer container.
Tab items have four states available – enabled, hovered, active and disabled. When a tab item is active the container displays the content for that tab. Only one tab item within a tab group can be active.
Tabs can activate a menu of additional options for a section of content.
Tabs can be set to automatically flow into an overflow menu when the container width becomes too small to display all tabs.
Tabs can be displayed in medium and small sizes.
- Do not nest a tab group within another tab group.
- Make sure that the relationship between a tab and its content is clear by clearly delineating the container.
- Do not use tabs for sequential content, instead use Steps.
- Make sure tab labels are concise. Refer to the Writing Guidelines.
- Do not use punctuation in tab labels.
- Do not truncate tab labels.
Contents