Tabs are a navigational 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.
Place tabs as high as possible in your main content area.
Use tabs to allow users to switch quickly between related pieces of information.
Use tabs without tabpanels.
Use tabs as navigation. Meaning they don’t take you from place to place. Rather, they are meant for context switching related to the page.
Nest tabs within a tabpanel. Tabs should live as high up in the main content area hierarchy as possible.
Have more than 8 tabs in a tablist.
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. Without an established icon repo, it’s best to not use them for now.
The JS included here is for demo purposes only. For those implementing the Tab component from scratch, be sure to implement the behavior as follows:
Set the select tab button's aria-selected attribute to true. If a different tab was previously selected, that tab button's aria-selected attribute must be set to false.
The tabpanel corresponding to the tab button is shown. This is done by removing the hidden attribute on the tabpanel. If a different tabpanel was previously visible, the hidden attribute is applied to it.
CSS custom properties
The tab indicator's left position and width are changed by updating CSS custom properties on the .ods-tabs element. The custom properties are as follow:
Odyssey takes care to ensure apropriate keyboard navigation for the tab component.
The width of the tab indicator
The position of the tab indicator along the x-axis
In the following example, you can see the tab indicator position is on the second element: