Components - Tabs usage

A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.

Mobile tabs

Fixed tab bar pinned to top with scrolled content

Inset search, app bar, and fixed tab bar

Text color is the same as the tab indicator

Default app bar and fixed tab bar with icons

Icon color is the same as the tab indicator

Desktop tabs

Tabs with an expanded More dropdown menu

Tabs with Books selected from a More dropdown menu

When to use

Use tabs to organize content at a high level, for example, presenting different sections of a newspaper. Don’t use tabs for carousels or pagination of content. Those use cases involve viewing content, not navigating between groups of content.

For more detail about using tabs for navigating top-level views, see “Top-level navigation strategies” in Patterns > App structure.

Don't use tabs with content that supports the swipe gesture, because swipe gestures are used for navigating between tabs. For example, avoid using tabs in a map where content is pannable, or a list where items can be dismissed with a swipe.

Fixed tabs should be used with a limited number of tabs and when consistent placement will aid muscle memory. Scrollable tabs should be used when there are many or a variable number of tabs.

Do.
The tabs switch between equally important facets of store content.

Don't.
The tabs switch between destinations of varied importance within the store.

Tab characteristics

Tabs control the display of content in a consistent location.

Formatting specifications:

Present tabs as a single row. Wrap tab labels to a second line if needed, and then truncate.
Do not include a set of tabbed content within a tab.
Highlight the tab corresponding to the visible content.
Group tabs together hierarchically. Connect a group of tabs with its content.
Keep tabs adjacent to their content. It helps maintain the relationship between the two with less ambiguity.