A tab provides the affordance for displaying an associated grouping of content. A tab label succinctly describes the tab’s associated grouping of content.
Use tabs to divide large amounts of related data or options into more digestible, focused groups with the goal of aiding content navigation or content organization, without the need to navigate away from the current context.
Although tabbed content may be navigational in nature (e.g., map route options that change a map view, search results leading to other sites), tabs are not themselves used for navigation.
Tabs are also not used for carousels or pagination of content (for example, swiping between pages of apps).
Tabs are presented as a single row.
Tabs should not be nested. That is, content in a tab should not consist of another set of tabbed content.
A set of tabs contains at minimum a pair of tabs and no more than six tabs.
Tabs control the display of content in a consistent location.
The tab corresponding to the visible content is highlighted.
Tabs are grouped together and the group of tabs are in turn connected with their content.
Keeping tabs adjacent to their content helps maintain the relationship between the two, as too great a separation can introduce ambiguity.
Content presented in tabs can vary widely, even between tabs. For example, different years within a tabbed portfolio or different types of settings.
All content within a set of tabs should be related under a larger organizing principle (e.g., Settings, Directions), with each tab’s content mutually exclusive of the others.
Tab labels should provide meaningful distinctions that logically organize associated content.
Tab labels may be icons or text, and must not be truncated.
Avoid the need for cross-tab comparison of content; significant cross-tab comparison may indicate the content would benefit from a different organization or presentation.
Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs (e.g., switching transportation methods for directions in Maps).
The maximum number of tabs is effectively limited by the view’s width. Fixed tabs have equal width, based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.
Scrollable tabs display a subset of tabs at any given moment, and can contain longer tab labels and a larger number of tabs. They are best used for browsing contexts in touch interfaces when users don’t need to directly compare the tab labels.
To navigate between scrollable tabs, touch the tab, swipe the tabs left or right, or swipe the content area left or right.
