#Overview

Tabs are used to alternate among related views within the same page.

#When to use

• When lengthy content has clear groupings
• Ideally when there are few content groupings, because hidden tabs become less discoverable (see “Overflow pattern” below for how to deal with many tabs on mobile)
• When content has unequal importance
• When content can be labelled concisely

#Don’t use for

• Comparing or referencing information
• Content that is critical for a successful user experience
• Content that cannot be labelled concisely (consider using an Accordion)

#Anatomy

1. Tab label
2. Selection indicator (active state): marks which tab is displaying content
3. Badge (optional): indicates additional information, such as new content or a number of items
4. Divider: base for tabs to sit on, divides tabs and the content below

#Spacing

1. Mobile
2. Desktop

#Best practices

#Use short, descriptive labels

Do

Labels describe the content and should be short, precise and clear.

Don't

Avoid long labels.

#Icons and badges

Do

Labels may be preceded by an icon. The icon may also have a badge.

Don't

A label should not have an icon without text. Do not use more than one badge in a label.

#Tabs are left-aligned and do not change position

Do

Labels always start on the left and are extended to the right.

Don't

Tabs should never be centered.

Do

The position of the tabs remains unchanged when users switch between content.

#Prioritise high-use content and don’t navigate away

Do

Arrange tabs so that high-use content is first in the list and selected by default.

Don't

A tab should never navigate to a new page.

#Behavior

#Full-width tabs

When there are only 2 tabs on mobile, they can optionally be full-width. The tabs are evenly distributed and their labels are center-aligned.

#Overflow pattern

When the number of tabs does not fit the device’s screen size, an overflow pattern should be used. This pattern is the same for desktop and mobile.

However, keep in mind that hidden tabs become less discoverable and the interaction cost to access them increases. The fewer tabs, the better.

#States

#Galaxus

#Digitec

1. Normal
2. Active
3. Hover
4. Disabled