Tabs

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

Anatomy: Tabs

Anatomy: Tabs

  1. Container: Holds all of the tabs included in the tab group.
  2. Tab group: Includes two to seven tabs of related content.
  3. Tab item: Includes a label and functions as the navigational tool to open the tab.
  4. Tab label: One to two words that explain the tab’s content.
  5. Active indicator: Shows users the active tab. Only one tab can be active at a time.
  6. Tab panel: The surface that holds the tab’s content.
  7. Tab content: Primarily text, but can also include images, data visualizations, and video. It should all be related to one topic or category.

Demo

Storybook failed to load. Please connect to the VPN to access.

Open the component in Figma.

Properties

Badge

Use 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:

  1. Selected
  2. 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.

 

These tab labels are oppositional and parallel. They relate to the page section as well.

These tab labels are oppositional and parallel. They relate to the page section as well.

 

These labels relate to the page topic, and are distinct categories at the same hierarchy: Incomplete {HealthInsights}, Complete {HealthInsights}, Dismissed {HealthInsights}

These labels relate to the page topic, and are distinct categories at the same hierarchy: Incomplete {HealthInsights}, Complete {HealthInsights}, Dismissed {HealthInsights}

These tab labels relate to the page topic and are distinct categories, but users may require information from the first tab to work in the second tab: Rules can apply to single groups, which are listed on the first tab.

These tab labels relate to the page topic and are distinct categories, but users may require information from the first tab to work in the second tab: Rules can apply to single groups, which are listed on the first 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

Figma: Tabs