Use tabs to help users navigate between short sections of related content within a single page, showing one section at a time.
When to use this component
Tabs work well for users who need to switch quickly between sections because the position of their headings remains static.
When not to use this component
Do not use tabs to display content that is critical to the user understanding or being able to progress with their task.
Consider the use of your service on mobile devices. Tabs only display on viewports wider than the medium breakpoint before their content is expanded and stacked vertically under headings.
Test your content considering the following alternatives before using tabs:
- simplify and reduce the content
- separate the content with headings
- divide the content across multiple pages
You can help users navigate quickly through page headings using a table of contents.
Accordions display vertically, which means that they can display more sections than tabs which display horizontally.
If there is only one section of content that needs to be condensed, use a details.
How to use this component
Tabs work well when the primary content block is displayed in the first tab.
Subsequent tabs can show further detail and/or deeper levels that relate to the primary content (but this is not a strict rule).
Use clear and short labels
Tabs hide content, so use tab labels that are clear, concise and tell the user what they are opening.
To avoid the tab layout breaking, consider using single words or reducing the number of tabs.
How this component works
Viewports equal to or larger than the medium breakpoint
The typical tab display will show on viewports that are equal to or greater than the medium breakpoint.
Convey to screen readers that the element serves as a container for a set of tabs.
Convey to screen readers that this element does not have any functional, interactive, or structural relevance implied.
Indicates the associated tab with the current content.
Indicates that the element is a content panel with associated tab.
Viewports smaller than the medium breakpoint
For viewports smaller than the medium breakpoint, tabs are displayed as a list and function as a table of contents.
All panels are displayed in the order they are structured. Selecting a link in the table of contents will jump the user to the associated panel.
Tabs can be used to reveal hidden blocks of content that provide detail about a media item above, such as an:
"variants": [ 'details' ] will style the tabs appropriately.
You can set
"noInitialActiveTab": true to prevent the first tab from being selected when the page is initially loaded.