Tabs

Tabs are horizontal navigation elements showing in which section the user is currently in. Content in tabs is organized by grouping related information into multiple panels rather than different pages, fitting more content into a limited space.

Usage guidelines

When to use

• Use tabs to organize content that is related and at the same level of hierarchy into multiple panels.

When not to use

• To show a process divided in steps; use Progress tracker instead.
• To navigate between groups of content that are not of equal importance or related.
• When users need to see content from multiple tabs simultaneously.

Writing guidelines

• Heading: text in tabs should clearly and concisely describe the content of the section they represent.

• Length: make sure all the labels have a similar length. Keep in mind that the character length of a heading will impact the experience.

• Capitalization and case: write tabs headings in sentence case.

• Overflow: tab labels appear in a single row. If tabs are too many to be accommodated horizontally across the viewport, side arrows will appear to allow for scrolling.

Specifications

Anatomy

1. Active tab: is the tab whose content is currently being displayed.
2. Inactive tab.
3. Tab label: shortly describes the content of the section it represents.
4. Icon: (optional) adds a visual cue to the label meaning.
5. Arrow: (optional) allows horizontal scrolling.
6. Separator

Variants

There are two types of tabs: ones with text and icons and ones with text only. Use the text and icon variant only when direct and specific icons exist for each tab.

Variants from two to ten tabs are available for both types, each with the option to show or hide side arrows.

Text

Text and Icon

Size

Tabs come in one size and scale to the width determined by their content.

Styling

Tab items have two kinds of main different styling: active and inactive. While the color of the elements and the thickness of the separator changes, font and icon never vary their size.

Active Item

Inactive Item

Communicate visual continuity between the tabs row and the content area.

Don't use a different background colors for the content area.

Behavior

Positioning

Tabs should always be placed on top of the content area. They can optionally be nested into other components, such as modals.

In desktop and tablet viewports, tabs can be placed justified in full content (12 cols) or narrow content (8 cols).

Alignment

Tabs can be either:

• Stretched throughout the container
• Left, center or right-aligned; please note that in this case, you will need to add a line element to the tab component to demarcate its whole width.

Interaction

Apart from active and inactive, tab items have four other states available: default, hover, focused and pressed.

**Default view**

The default view displays the first tab as the active one. When a tab item is active, the container displays the content for that tab. Only one tab item can be active at a time.

**Navigation**

To navigate from one tab to the other, simply press on an inactive tab.

**Scroll Arrows**

Use scroll arrows to navigate through the hidden tabs.

Accessibility guidelines

Design Considerations

• Keep in mind that when using tabs, the content of your page will become less discoverable, especially for users of assistive technologies but also for sighted users.
• Each content panel should always have a heading as it helps to reduce user confusion navigating the content through screen readers. This heading can be visually hidden.

Keyboard Interaction

For tabs with automatic activation:

• Tab: to move focus between the tab items, that will be automatically activated.
• Right arrow: moves focus to the next tab item.
• Left arrow: moves focus to the previous tab item.

For tabs with manual activation:

• Same as above, plus:
• Space/enter: to activate the item in focus so that content is shown.

Related components