Tabs

Key Points

• Tabs are a navigation element that allow users to easily access different areas of an application or different parts of an individual page
• 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 important information
• Take a content first approach when designing for tabs
• Tab labels should be short and concise, ideally one word
• Make sure your labels are legible for all use cases. If you have long content, use secondary tabs so later tabs are not hidden from users who may have text magnified

Usage

Tabs should be used to display related content within the same area in the page hierarchy.

We have two types of tabs, primary and secondary. These have different behaviours on small screen.

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.

Decision tree: Should I use tabs?

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.