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.
Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty. As the second-brightest natural object in the night sky after the Moon, Venus can cast shadows and can be, on rare occasion, visible to the naked eye in broad daylight.
Earth is the third planet from the Sun and the only astronomical object known to harbor life. About 29% of Earth's surface is land consisting of continents and islands.
Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System, being larger than only Mercury. In English, Mars carries the name of the Roman god of war and is often referred to as the "Red Planet".
# 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.
Missions
There have been 12 missions involving atmospheric vehicles.
Missions
There have been 4 missions involving lander vehicles.
# 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
| 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
# Basic example
Tabpanel 1 content…
Tabpanel 2 content…
Tabpanel 3 content…
<div id="example" class="ods-tabs" aria-label="Describes the purpose of this set of tabs">
<div role="tablist" aria-label="label" class="ods-tabs--tablist">
<button id="tab-1" role="tab" tabindex="0" aria-controls="tab-1-tabpanel" class="ods-tabs--tab" aria-selected="true">Tab 1</button>
<button id="tab-2" role="tab" tabindex="-1" aria-controls="tab-2-tabpanel" class="ods-tabs--tab">Tab 2</button>
<button id="tab-3" role="tab" tabindex="-1" aria-controls="tab-3-tabpanel" class="ods-tabs--tab">Tab 3</button>
</div>
<div class="ods-tabs--tabpanel">
<div id="tab-1-tabpanel" role="tabpanel" aria-labelledby="tab-1" tabindex="0">
<p>Tabpanel 1 content…</p>
</div>
<div id="tab-2-tabpanel" role="tabpanel" aria-labelledby="tab-2" tabindex="0" hidden="hidden">
<p>Tabpanel 2 content…</p>
</div>
<div id="tab-3-tabpanel" role="tabpanel" aria-labelledby="tab-3" tabindex="0" hidden="hidden">
<p>Tabpanel 3 content…</p>
</div>
</div>
</div>
# Switching tabs
The JS included in the @okta/odyssey package 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.