Overview

Tabs

Tabs organise related content that are at the same level of hierarchy. You can use them at the page level, or nest them in a sub-section within a page.

Tabs

Usage

When to use
Use tabs to present groups of information and allow users to navigate between them without leaving the page or section. Have 2 tabs minimum, with one selected by default. Tabs can be used at a full-page level or within a section.
How best to use
Don't
Don't nest tabs within tabs.
Do
Clearly define the container so it's obvious which content area is controlled by the tab.
Do
To make sure the tabs are easily scannable, use no more than 5.
When not to use
Don't use as primary navigation
Tabs help users navigate to different groups of content within the same hierarchy.
⁠
Don't use for filtered content view
Use a dropdown, chips or other selection input for such use cases.
⁠
Don't use when the user needs to read or compare all information on page
If users may need to view all of the content within the tab containers at the same time, consider keeping the content within the same page, or apply an alternative design pattern.
⁠
Don't use tabs to present a flow
Tabs are not suitable when users need to move through a series of steps one by one.