When tabs are the right pattern
Applies to All viewports
Tabs switch between views of the same thing, in the same place. People should be able to guess what is behind each one without opening it.
Why?
A tab hides everything behind the others. That is only acceptable when people need one view at a time and know which one they want.
When to use it
- Two to six parallel views of one object, such as Overview, Activity and Settings.
- People rarely need to compare what is behind two tabs.
- Each label is one or two words.
When not to
- Steps that happen in order: use a stepper.
- Content people need to compare: show it together.
- Navigation between unrelated pages: use the navigation.
Common mistakes (4)
- Tabs used as filters, so the count changes but the view does not.
- A tab row that scrolls with nothing showing there is more.
- Tabs nested inside tabs.
- A different selected tab when the page is reloaded.
Senior designer note“If people click through every tab to find something, the labels are not doing their job.”
Official guidanceSGDSMaterialGOV.UKAtlassianCarbonFluentPrimer
- SGDS
Use tabs for sections that share the same context.
SGDS, Tab(opens in a new tab)Design-system convention
- Material
Tabs organise groups of related content.
Android Developers, Tabs(opens in a new tab)Design-system convention
- GOV.UK
Not everyone will notice tabs or understand how they work.
GOV.UK Design System, Tabs(opens in a new tab)Design-system convention
- Atlassian
Tabs organise content by grouping similar information on the same page.
Atlassian Design System, Tabs usage(opens in a new tab)Design-system convention
- Carbon
Use tabs to group related information into categories, so people do not navigate away from their workflow.
Carbon, Tabs(opens in a new tab)Design-system convention
- Fluent
A tablist switches between categories of related information without going to a different page.
Fluent 2, Tablist usage(opens in a new tab)Design-system convention
- Primer
Each tab should load unique content with a dedicated URL, and one should be preselected on page load.
Primer, UnderlineNav guidelines(opens in a new tab)Design-system convention