Tabs

Overview

Tabs are used to quickly navigate between views within the same context. Use tabs to separate information into logical sections based on functionality or use case.

Users can easily switch between tabs to perform tasks without leaving the page. Assign a default tab based on the most important use case for the page. The sections that the tabs define function independently of each other, so do not use tabs to define a linear, ordered process.

Text

Each tab label describes its content and sets user expectations. Labels are concise and use one to two words maximum. Keep in mind that at mobile widths, the character length of a title will impact the experience. Icons are not permitted in tab labels.

Number of tabs

A maximum of six tabs may be displayed. This is to maintain an uncluttered UI and reduce cognitive load for users.

Order

Tab order should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.

Tabbed content

This component is used for occasions where content is separated on a container from another element that interacts with it, like a summary sidebar and when is possible to add more tabs.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.