A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.
Mobile tabs
Default app bar and fixed tab bar
Extended app bar and fixed tab bar
Fixed tab bar pinned to top with scrolled content
Inset search, app bar, and fixed tab bar
Default app bar and scrollable 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
Default app bar and tab bar
Tabs with a More dropdown menu
Tabs with an expanded More dropdown menu
Tabs with Books selected from a More dropdown menu
Tabs with overflow pagination
Tabs with overflow pagination scrolled
Tab bar centered
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.
The tabs switch between equally important facets of store content.
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.
Tabs are presented as a single row.
Tabs are not presented as a single column.
Use a content hierarchy such that tabs relate to the currently displayed content.
Tabs should not be nested.