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.
# Switching tabs
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
true. If a different tab was previously selected, that tab button's
aria-selectedattribute must be set to
- The tabpanel corresponding to the tab button is shown. This is done by removing the
hiddenattribute on the tabpanel. If a different tabpanel was previously visible, the
hiddenattribute is applied to it.
# Keyboard support
|Tab||When focus moves in to |
|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 |
|Enter Space||When focus is placed on a tab, the corresponding |
|Right Arrow||When focus is within the |
|If the last tab is focused the focus is moved to the first tab.|
|Left Arrow||When focus is within the |
|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.|