The Tab template acts as a container for other templates listed below, providing tabs across the top (as shown in Anatomy of the Tab template).
The tabs allow switching among views. This capability is particularly useful for organizing content or views that users will want to browse or search.
- Tab bar with app icon and up to 4 tabs (no back button)
- Embedded template, which can be any of the following types:
Each tab view corresponds to one embedded template, and only one tab view can be active at any given time.
Anatomy of the Tab template
Tab template examples
Tab template UX requirements
|MUST||Include a tab bar with a label and a monochromatic vector icon for each tab.|
|MUST||Include at least 2 and no more than 4 tabs in the app header.|
|MUST||Include an embedded, non-blank template in each tab view.|
|MUST NOT||Allow more than 1 tab to be active at a time.|
|MUST NOT||Create a secondary navigation by adding a second level of tabs.|
|SHOULD||Use short tab labels to avoid truncation.|
|SHOULD NOT||Include a header or action strip in embedded templates.|