Best practices
Tabs have to contain at least two items and one tab is active at a time. They can be used on full page layouts or in components such as modals and cards. Tab labels should be short to improve readability. Users should be able to easily scan the Tabs and know what type of content to expect. Try to keep labels to 1-2 words each.
When to use
- To group related information into different categories
- When users don’t need to see content from multiple views simultaneously
When not to use
- Tabs should never be used for primary navigation
- Tabs should not be used to indicate progress
- Tabs should not be used to filter page content
Anatomy
- Label
- Indicator
Behaviour
When a page requires more tabs that can fit or needs to adapt to a new browser size, tabs should either become scrollable or display a icon button that reveals a list containing the off-page tab labels.
Responsive behaviour
When space runs out, overflow labels get tucked into a dropdown. The icon button aligns with the right side of the page and any labels not visible in the tabs will be listed in the dropdown. Tapping a label from the dropdown will result in that label shifting to a selected state and positioned to the furthest left possible in the tabs, pushing other labels out of view and into the dropdown.
Content guidelines
|
✅ Do |
🛑 Don’t |
|---|---|
|
Do keep tab labels concise, ideally one to two words. |
Don’t use unclear, unnecessary, or more than two words for labels, unless necessary. |
|
✅ Do |
🛑 Don’t |
|---|---|
|
Do display more icon or allow horizontal scroll when tabs overflow the screen size. |
Don’t truncate labels or wrap to multiple lines. |
|
🛑 Don’t |
|---|
|
Don’t use horizontal scroll when tabs overflow the screen size. |