Skip to main content
Odyssey Design System

Tab

Navigation component used to organize content by grouping similar information on the same page. They allow content to be viewed without having to navigate away from that page or route.

# Anatomy

# Behavior

Users interact with Tab as they would a button, the main difference is the outcome. By default, the first tab from the left is active and the associated content displayed in the tab panel. Upon selecting a different tab, the tab indicator appears on the selected tab. The tab panel will then update to show the new content.

Additionally, the tab element is keyboard-navigable (See Accessibility: Keyboard Support)

Terrestrial Planets

Terrestrial planets are planets that are composed primarily of silicate rocks or metals.

Mercury is the smallest and innermost planet in the Solar System. Its orbit around the Sun takes 87.97 Earth days, the shortest of all the planets in the Solar System.

# Usage

Tabs were created to shorten long pages. Before you use these, we’d recommend laying out all of the content on your page out first. From there, figure out common themes and see what could be grouped together. Those themes should become your Tabs.

# Relate to the page title

Tabs are not navigation. Meaning they don’t take you from place to place. Rather, they are meant for context switching related to the page.

Do

Terrestrial Planets

Terrestrial planets are planets that are composed primarily of silicate rocks or metals.

Don't

Terrestrial Planets

Terrestrial planets are planets that are composed primarily of silicate rocks or metals.

# Position above major content

Tabs are best used at the top of the page or situated above the content it’s related to. This will help establish hierarchy.

Do

Missions

There have been 49 missions involving various types of spacecraft.

Don't

Missions

There have been 8 missions involving orbiters.

# Don't stack tabs

Use Tab sparingly. Limit the Tab component to one per page, and refrain from including a second set of Tabs within a tabpanel.

Don't

# Content Guidelines

  • Refrain from using tabs without tabpanels.
  • Don't have more than 8 tabs in a tablist.
  • Don't add an icon to a tab. Icons should be reserved for very specific things. It can be hard to maintain consistency with use of icons as it pertains to their semantic meanings and meaning to Okta.

# Accessibility

# Keyboard Support

When implementing this component you should consider the following keyboard behaviors.
Key Behavior
Tab When focus moves in to tablist the focus is placed on the first tab element.
Unlike the right arrow key, if you tab past the last element, the tab focus continues down the page as normal. In this case, it should set focus in to the active tabpanel
Enter Space When focus is placed on a tab, the corresponding tabpanel is activated/displayed.
Right Arrow When focus is within the tablist the next tab is selected.
If the last tab is focused the focus is moved to the first tab.
Left Arrow When focus is within the tablist the previous tab is selected.
If the first tab is focused the focus is moved to the last tab.
Home If a tab has focus, the focus is moved to the first tab.
End If a tab has focus, the focus is moved to the last tab.

# References

# Further Reading