Tabs

The tabs component allows users to switch between related content sections within the same page context.

It organises information into distinct panels accessible through clickable tab labels, with only one panel visible at a time.

Use tabs to present related content that users need to access quickly without losing their overall page context.

Use tabs when you need to:

• present different views of the same data or content (such as different time periods or categories)
• organise related information that users might want to compare or reference quickly
• reduce page length when you have several distinct but related content sections
• allow users to focus on specific aspects of a topic without losing context
• display different formats of the same information (such as summary and detailed views)
• present content that logically groups into 2-6 distinct categories
• provide quick access to related tools or different perspectives on the same subject

Don’t use tabs when other components work better.

Use step by step navigation instead when:

• content is sequential and should be read in order
• users need guidance about dependencies between sections

Use accordion instead when:

• users might need to see multiple sections simultaneously
• content sections vary significantly in length
• you want to give users an overview of all available sections

Use separate pages instead when:

• tab content is very long or complex
• content sections are substantial enough to warrant their own pages
• users need to bookmark or share specific content sections

Avoid tabs when:

• you have only one content section (use standard page layout)
• you have more than 6 tabs (becomes difficult to navigate, especially on mobile)
• content is unrelated or doesn’t benefit from quick switching
• users need to compare information across multiple sections simultaneously

Structure tab content to support quick navigation and clear understanding.

Tab labels

Write clear, scannable labels that help users find relevant content:

• use short, descriptive labels that clearly indicate content
• keep labels consistent in length and format for visual balance
• avoid generic terms like ‘Details’ or ‘Information’
• ensure labels work when read out of context by screen readers

Content organisation

Structure content within tabs to maximize usability:

• ensure each tab contains substantial, meaningful content
• make content within each tab self-contained and understandable independently
  avoid tabs with just a few lines of text
• organise content so users don’t need information from other tabs to understand the current section

Tab ordering

Arrange tabs to support user priorities and logical flow:

• place the most important or frequently accessed content first
• consider logical progression or user workflow when ordering tabs
• maintain consistent tab order across similar content or services
• ensure the default (first) tab contains the most essential information

Content relationships

Design tab content to work effectively together:

• ensure content across tabs is related but distinct
• avoid duplicating information across multiple tabs
• consider how users might move between tabs and what information they need