Tabs

Key Points

• Tabs are a navigation element that allow users to move between distinct content sections
• Only one content section is used at a time
• Tabs are not the same as ‘browser tabs’. They should not be used for displaying sequential content, as a user can select a tab in any order
• In Compound, tabs are available in two styles, and in light and inverted themes
• The first tab should always contain the most critical information
• Take a content-first approach when designing for tabs
• Tab labels should be short, ideally one word
• Make sure your labels are legible for all use cases
• Tabs are more suited to situations where adequate horizontal space is available

Tabs v Accordions

Both components display large volumes of content in a more compact space, helping to reduce initial page length and cognitive load. However, each has a specific usage.

Key Differences

• Tabs: Only one section is visible at a time. Users switch between complete views. Better for equal-length sections and desktop viewports
• Accordions: Multiple sections can be open at once. Users expand only what they need. Better for varying content lengths and mobile viewports

Critical Points

• Tabs require users to switch between sections to access different content actively
• Tabs require sufficient horizontal space for all tab labels to be visible

Usage

Use tabs for navigation between distinct content sections, where only one section is displayed at a time. Tabs work best for:

As tabs hide content, a decision to use them should be tested to confirm user understanding and navigability.

Use the decision tree on this page to ask whether you should be using tabs. Tabs should not be used as a quick fix to add more content in your journey.

• Primary content that represents different categories or views
• Content sections of roughly equal length and importance
• Situations where users browse through sections sequentially
• Desktop and larger viewports where horizontal space is available for tab labels
• Limited number of sections (typically 3-7 tabs)

Decision tree

If you are thinking about using tabs, first consider whether it’s better to;

• Simplify and reduce the amount of content
• Split the content across multiple pages or sections
• Separate content with headings
• Use a table of contents to let users navigate quickly to specific sections of content
• If you need longer labels, it’s a sign that the choices are too complicated for a tab control.

Follow this decision tree below to check whether tabs are appropriate for your use case:

Tabs for content

Our main type of tabs are used for content within a page.

On a small screen, these expand into a contents list. These list items are an interactive anchor link, that jumps the user to a heading that contains the contents from within the tab.

Ensure you are designing with a content first approach for these tabs, as it will increase the length of a page on a small screen.

These tabs are best for accessibility as nothing is hidden from a user who may have text magnified, may have a small screen, or when there are multiple tab labels with longer text.

Note: These tabs will also be displayed when a user has javascript disabled.

Tabs for navigation

We also have tabs that are used for interfaces such as dashboards, or key sections on a page that act as secondary navigation. Content in these tab labels should be short and no more than one word.

On a small screen these tabs overflow. Extra padding is added on the left to indicate scrollable content, and a fade to the right previews the later tab in the list.

Note: For accessibility, we advise using these tabs sparingly. Take a content first approach, and refer to the decision tree below as to whether tabs are appropriate for your use case.

Behaviour

The interaction for each tab is the same. When a user clicks on a tab the area of content directly below it shows content. We follow W3 tabs pattern for keyboard navigation.