Components
Tabs
- Overview
- Usage
Overview
When to use
Use tabs to group related information into different categories, helping to reduce cognitive load.
When not to use
- Don’t use tabs to create primary navigation that links to other pages.
- Don’t use tabs for content that is not related.
Principles
Tabs are always used in a tab group. Since they are used to switch between multiple contexts, tabs cannot be used standalone (minimum 2 tabs required) and only one tab can be selected at a time.
Do not hide important information inside tabs, and keep the number of tabs low wherever possible.
Use short tab labels that are clear and specific. Labels should be 1-2 words and should clearly communicate the view users will see and the content contained in the view.
It is recommended that the maximum amount of tabs in a single tab list is 7.
Size
Regular
Regular size should be the preferred option in most cases.
Compact
Compact size has reduced font size and spacing. It may be used in dense and data-heavy layouts.
Divider
The bottom divider line should extend to the width of the content area.
If the tab group and tab content are placed on a different background, then the divider line may be removed to reduce visual noise.
Overflow
When a tab group's container does not have enough space to display all of the tabs, this tab group becomes scrollable by dragging the tab bar or by clicking on the arrow buttons.
Try to use this behavior only on smaller screens (tablets and phones). Overflowing tab group on a larger screen (1280px and up) is usually a sign of excessive complexity and you may want to reduce this complexity by splitting your content into multiple sections or by using other components to display the content (for example accordions).