Tabs
Tabs group related content under short labels on the same page and show one group at a time.
When to use
- The user needs to view different types of related content one at a time.
- The content splits into distinct groups that each fit under a short label.
When not to use
- If users need to see content from more than one tab at the same time, use a different component or show the content on the page instead.
- If the content is a set of independent topics, such as FAQs, or users need only the part that applies to them, use Accordion instead.
- If users switch between different views or filters of the same content, use Segmented Control instead.
Usage guidance
How to group content into tabs, and what to do when the tabs are wider than the available width.
Group content by topic
Group content by topic, so each tab holds similar or related information.
Match the tabs to the available width
Remove or combine tabs, or shorten their labels, where you can. If the tabs are wider than the available width, they overflow and the tab bar adds a scroll button at each end. Users can’t see all the tabs at once, so tabs that overflow are easier to miss.
Example of tabs overflowing.
Content guidance
- Keep each tab label short and specific, so users can tell what is behind the tab.
- Don’t use ALL CAPS for tab labels. For how to write and format labels, see Labels.
- Before adding an icon to a tab label, read the icon best practices.
Related components
| Component | Use case |
|---|---|
| Accordion | When the content is a set of independent topics, or users need only the part that applies to them |
| Segmented Control | When users switch between different views or filters of the same content |