Tabs allow navigation between related content topics that are at the same level of hierarchy.
Overview
Tabs are primarily used in page layouts to create logical, related sections that users navigate without leaving the page. Tabs shouldn’t be used when users need to compare information on different tabs.
Anatomy
- Container: Holds all of the tabs included in the tab group.
- Tab group: Includes two to seven tabs of related content.
- Tab item: Includes a label and functions as the navigational tool to open the tab.
- Tab label: One to two words that explain the tab’s content.
- Active indicator: Shows users the active tab. Only one tab can be active at a time.
- Tab panel: The surface that holds the tab’s content.
- Tab content: Primarily text, but can also include images, data visualizations, and video. It should all be related to one topic or category.
Demo
Open the component in Figma.
Properties
Counter
The counter uses the badge component to report system-generated numerical information to users. For example, the number of items contained in a tab or the number of new items contained in a tab. See badge.
Behaviors
States
Tabs have two main states:
- Selected
- Unselected
There need to be at least two tab items in a tab group. By default, one of the tab items in the group must be selected.
Overflow
When there are more tabs than fit in the available horizontal space, scrolling buttons automatically appear on either side of the container to allow users to navigate left and right of the visible tabs.
- This behavior is intended for smaller viewports.
- Don’t use overflow to include more than the maximum recommended number of seven tab items on full-width pages. Instead consider different components or a flow to handle the complexity.
Accessibility
Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.
Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone. See the ARIA guidelines for tabs.
Content guidelines
Use tabs to group related information into different categories, helping to reduce cognitive load.
Tab label
- The tab label should help users predict the content of a tab panel before opening it.
- Use one to two short words that describe the contents of the panel.
- Keep tab labels short: if the label is too long for the tab, it will overflow and the text won’t be visible.
- In general, use nouns. A verb or short verb phrase may make sense in some contexts.
- Use only text. An icon shouldn’t be used to replace or decorate text.
- Write in sentence case (capitalize the first word and proper nouns only).
- Consider the relationship between the tab labels. If tabs are oppositional, make tab labels parallel. If a few tab labels start with verbs, try to make all of them start with verbs.
- Relate to the section of Okta they’re on. Imagine the page section title is an invisible noun after the tab.
Tab content
- As a group, all tabs are about a shared topic.
- Each tab panel should contain content that is distinct from other tabs in the group.
Content accessibility
Each tab is required to have a unique label that describes the content. Labels give users of assistive technologies the necessary information needed to efficiently navigate the content.
Tab content also needs to be accessible. For example, if you add a non-decorative image to the panel, you need to include alternative text for the image.
Additional references
- Jakob Nielsen (2016, July 9) Tabs, Used right - Nielsen Norman Group