A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.
When to use
Use tabs to organize content at a high level, for example, to present 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 “Tabs” in Components > Navigation.
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.
Tabs control the display of content in a consistent location.
- 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 to maintain the relationship between the two.