Tabs

Example

Overview

Tabs group related content and let users move between views without leaving the page. They can be used in full page layouts or within components such as modals, cards, and side panels.

When to use

Tabs help reduce cognitive load by grouping related information into clear categories. They can be used to organise content such as forms, settings, and dashboards, allowing users to complete tasks without leaving their workflow.

When not to use

Filtering the same content
When switching between different formats of the same content or filtering identical content, use a content switcher instead. Content switchers are often used alongside tabs but usually sit lower in the hierarchy to organise related content within a tab.

Indicating progress
For step-by-step, linear processes, use a stepper. Tabs organise information hierarchically but are not intended to guide users through a fixed sequence.

Comparing information
Tabs are not suitable when users need to compare information across groups, as switching back and forth between tabs adds unnecessary effort.

Anatomy

Main elements

Label

• Use short, clear tab labels that are specific and easy to scan. One or two words is recommended.
• Text labels should clearly describe the view and the content users will see when the tab is selected.

States

Tabs have two primary states: selected and unselected. Additional interactive states include hover, focus, and disabled. By default, one tab is preselected, usually the first. Only one tab can be selected at a time. When a new tab is chosen, the previously selected tab is deselected automatically. A tab remains selected until the user changes it.

Scrollable

When a page contains more tabs than can fit, or needs to adapt to changes in browser size, line and contained tabs should become scrollable. Left and right arrows appear to help users navigate tabs that extend beyond the visible area.

Interactions

Mouse

Users can change state by clicking anywhere within a tab container.

Keyboard

One tab should be selected by default. Users can move between tabs using the Tab and Shift + Tab and open a tab using Enter.

Tabs with icons

Icons can be used in tabs. Icons are always positioned to the left of the label and should not appear above, below, or to the right of it.

Icon-only tabs

Icon-only tabs can be used in tabs. Icons should be easily recognised and widely understood. This approach works best in small, clearly defined spaces and within components. Always include a tooltip on hover and focus to provide an accessible description of the icon.