The site is not yet optimised for mobile viewing. Please view on screens wider than 768px like your desktop screen.

Tabs

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.

Best practice

  • 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

Tabs

Usage

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).

Definition

Tabs organize and support navigation between sets of related content that are at the same level of importance.

Example

Tab

Code

Desktop
  • 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
Mobile
  • Font-size: 1.4em.

Forthcoming...

Forthcoming...

Definition

Example

See tabs above under 'Code'.

Tabs nested within a tab

Usage

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.

Definition

Example

nested-tabs

Tabs with image

This is the same UI as 'Content 3col (feature text & tabs)'.

Usage

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.

Definition

Examples

Desktop

Three columns and a full bleed image

tabs with images
Mobile

On mobile, the tabs convert to into an accordion at 767px width.

tabs with images

Code

Desktop

Tabs

  • text colour: $charcoal--120
  • padding-bottom: 1em
  • border: 1px solid $black--40

Selected (open) tab

  • Behaviour: first tab is open by default.
  • $red--120
  • font-weight: bold
  • border bottom: 1px

Hover / focus tab state

  • $red--120
  • font-weight: normal
  • border bottom: 1px
Mobile

Accordion

  • border: $black--40 & 1px
  • side margins: 15px

Heading tab selected

  • $charcoal--120, bold
  • icon: ‘Up-2’

Heading active (hover)

  • Behaviour: entire tab heading is clickable.
  • text underlined
  • icon: ‘Down-2’

Forthcoming...

Forthcoming...

Example in action

Related stories ('Let us assist your journey')

Related UI modules

Content 3col (feature text & tabs)
Accordion