Tab

v2.2

Tabs organize and manage content within an interface, allowing users to navigate between different sections or views without leaving the current page.

Skin
Marko
React

Considerations

Context preservation

Tabs allow users to switch between sections without losing context on the page they’re on. Tabs only change the content below them.

Flexible

The number of tabs may vary depending on experience and context.

Organizational

Tabs can help divide content into more manageable and easier-to-digest sections.

Anatomy

A tab set with 5 tabs. Number 1 points to Tab 1 which is active. Number 2 points the indictor line of the active Tab 1.

Label
Active indicator

Properties

Title

All tabs must have a title. It should be brief and descriptive, using one or two words.

A tab set with 3 tabs. The first tab is active.

Divider

To create greater separation and prominence, a divider can be added along the bottom of a tab set.

A tab set with 6 tabs. An underline is added beneath.

Behavior

Scrolling

Tabs extending beyond the screen are scrollable. The space between tabs can be adjusted to allow a glimpse of the content on the right.

A mobile screen with a tab set at the top. The first tab is active and the set runs off the right side—signaling it is scrollable.

Number of tabs

Tab sets must have at least two tabs. Aim for no more than 7 tabs where possible.

A desktop screen with 7 tabs at the top of the page. It is a selling page that has a left hand navigation and data table with filters.

Space between tabs

Default spacing between tabs is 40px. However, the spacing will be adjusted automatically to ensure a peek on the right when tabs extend beyond the screen.

A mobile screen with a tab set at the top. The second tab is active and the set runs off the right side.

States

Tabs can be either active or inactive. When inactive, they have a hover state. Active state indicator lines span the width of their text.

Three tabs. The first has the active state applied, the second has the hovered state applied, and the third has the inactive state applied.

Content

Labels

Aim for fewer than 12 characters in tab labels, with a maximum length of 32 characters.

A mobile screen with a tab set at the top. The third tab is active and the set runs off the right side. The tabs ready Tech, Fashion, Home & Garden, and Sporting Goods.

Screen sizes

Small

Tabs are located beneath the header. If the content of the tabs exceeds the screen size, they can be scrolled left or right.

A mobile screen with a tab set at the top. A set of filters and icon buttons are below it with some item tiles.

Medium and large

Tabs are typically placed at the top left in a contextual navigation bar located directly beneath the primary navigation.

Best practices

Nesting

If required, use filtering for in-page content refinements.

A single tab set at the top of a mobile screen.

Don’t use tabs for additional content refinements.

Two tab sets stacked at the top of a mobile screen.

Label length

Do keep tab labels short and concise.

A tab set at the top of a mobile screen. The tab labels are concise and read “Watchlist, Saved Searches, and Save Sellers”.

Avoid using long tab labels. Having fewer tabs will make them fit better on the screen and reduce the need for scrolling.

A tab set at the top of a mobile screen. The tab labels are lengthy and read “Items you have saved” and “Searches you have saved”.

Do follow the maximum character length for tab labels.

Don’t exceed the 32 maximum character length. Labels should never wrap to two lines.

A tab set at the top of a mobile screen. The tab labels are lengthy and one of them wraps to two lines of text.

Specs

A spec for a tab set. There is 40px between tabs, 4px between the indicator line and text, and the indicator line and optional divider line are both 2px.