The tabs component lets users navigate between related sections of content, displaying one section at a time.
Variants
Usage
Best Practices
When to use this component
Tabs can be a helpful way of letting users quickly switch between related information if:
your content can be usefully separated into clearly labelled sections
the first section is more relevant than the others for most users
users will not need to view all the sections at once
Tabs can work well for people who use a service regularly, for example, users of a caseworking system. Their need to perform tasks quickly may be greater than their need for simplicity of first-time use.
When not to use this component
Do not use the tabs component if the total amount of content the tabs contain will make the page slow to load. For this reason, do not use the tabs component as a form of page navigation.
Tabs hide content from users and not everyone will notice them or understand how they work.
Do not use tabs if your users might need to:
read through all of the content in order, for example, to understand a step-by-step process
compare information in different tabs - having to memorise the information and switch backwards and forwards can be frustrating and difficult
Test your content without tabs first. Consider if it’s better to:
simplify and reduce the amount of content
split the content across multiple pages
keep the content on a single page, separated by headings
use a table of contents to let users navigate quickly to specific sections of content
Decide between using tabs, accordion and details
Tabs, accordions, and details all hide sections of content which a user can choose to reveal.
If you decide to use one of these components, consider if:
the user does not need to view more than one section at a time – consider using tabs
the user needs to switch quickly between sections – tabs can show content without pushing other sections down the page, unlike accordions
there are many pieces of content – tabs can fit fewer sections as they’re arranged horizontally, unlike accordions which are arranged vertically
there’s only one or two pieces of short, less important content – the details component is more suitable as it’s visually smaller and less prominent than an accordion or tabs