Tabs

The tabs component lets users navigate between related sections of content, displaying one section at a time.

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