Tabs make it easy to view and navigate stacked panels of related content. They are especially useful when you need to show a lot of content in a small space.
- Use tabs when users do not need to compare content from multiple tabs simultaneously - having to switch back and forth puts an added burden on their short-term memory compared to a design that puts everything on one big page.
- Tab headings should clearly describe the content of the tab. Avoid long headings (one to two words is ideal) as they will reduce the space available for tabs on the right (especially on smaller screens). Headings should be concise with keywords at the start - 'front loading' - to aid user scanning. If you need longer headings this could indicate that the tab choices are too complicated for a tab component.
- Each tab should contain content that is distinct from other the tabs in a set but of equal importance in the page hierarchy.
- As a default, there should always be an one tab that is selected with its content visible (normally the first tab).
- Tabs should always be placed above the content it relates to.
- The minimum number of tabs you can use is two.
- It must always be clear which tab is the selected tab. Also onsider underlining tab links on hover so that the users know exactly which tab they are about to select. Underlining links on hover is an accessibility consideration.
- Only one content panel can be shown at a time.
- Only use one row of tabs. Multiple rows create tab element jumping makes it difficult for users to remember which tabs they have already visited.
- Do not use tabs for content than needs to be read in sequential order as user may jump to any tab.
- For mobile screens more than three tabs will need to activate horizontal scrolling. Best to limit to approximate three tabs or switch to an accordion.
Alternative UI modules
This is our default version of Tabs. Consider using this version first as it is the simplest to use for the user as well to build (meaning less likely to break).
Tabs organize and support navigation between sets of related content that are at the same level of importance.
- Active tab heading: Avenir Heavy, Arial, sans-serif; bold; 1.5em; $red--100; border-bottom.
- Inactive tab heading/s: Avenir Book, Arial, sans-serif; normal weight; font-size 1.5em; $charcoal--120; border-bottom ($black--40).
- Tab content copy: Avenir Book, Arial, sans-serif; normal weight; font-size 1.5em; $charcoal--120.
- Alignment: left
- Font-size: 1.4em.
See tabs above under 'Code'.
Tabs nested within a tab
When you need to present complicated information for multiple situations you could consider nested tabs. However, use this component sparingly as each nested level of tabs adds cognitive effort for a user to work out how the tabs work and what its content means. Also users may not be able to see whole tab section forgetting title of the opened parent tab. For this reason consider only using two or so parent tabs.
Tabs with image
This is the same UI as 'Content 3col (feature text & tabs)'.
Use the Tabs with an image component when you have a need for a highlighted text box (with $purple--100 background colour) and content suitable for tabs. See 'Best practice' above, e.g. each tab should contain content that is distinct from other the tabs in a set but of equal importance in the page hierarchy.
The vertical space available for each tab is restricted in this component by the height of the text box. Otherwise it could break the design balance.
Three columns and a full bleed image
On mobile, the tabs convert to into an accordion at 767px width.
- text colour: $charcoal--120
- padding-bottom: 1em
- border: 1px solid $black--40
- Behaviour: first tab is open by default.
- font-weight: bold
- border bottom: 1px
- font-weight: normal
- border bottom: 1px
- border: $black--40 & 1px
- side margins: 15px
- $charcoal--120, bold
- icon: ‘Up-2’
- Behaviour: entire tab heading is clickable.
- text underlined
- icon: ‘Down-2’
Example in actionRelated stories ('Let us assist your journey')
Related UI modulesContent 3col (feature text & tabs)