Tab bars enable users to navigate between the main pages of a mobile application. They’re typically anchored to the bottom of the screen on mobile applications. They organize content into labeled tabs and switching tabs takes users to a new page.
Also known as: Bottom navigation, tab strip, tab navigation, tab menu, UITabBar (iOS), TabLayout (Android).
Anatomy
A. Label (required): Brief text describing the tab content.
B. Active tab visual indicator (required): Visual indicator showing the tab currently in view.
C. Icon (required): Icon used to represent the tab.
Usage
| When to use | When not to use |
|---|---|
| For mobile and tablet platforms. | For web platforms. |
| For main destinations that users need to access from anywhere in the app. | For sub-destinations such as user preferences. |
| When there are three to five linked destinations. | If there are less than three destinations. |
Best practices
- Reference Application layouts for help deciding which navigation component is best for your use case.
- Avoid using more than five tabs in the tab bar.
- Clearly indicate the active tab to help users understand which tab is related to the information presented.
- Organize tabs in a logical order, such as placing the most frequently accessed tabs at the beginning.
- Ensure there’s sufficient touch area for each individual tab to allow for easy and accurate selection.
- Follow all guidance for implementing Badges on tab labels.
Do Keep tab labels short and descriptive.
Don't Use long tab labels that may cause truncation.
Behaviors
Badges
Tab bar navigation can be paired with number badges in the top right corner of the tab icon to display dynamic information, such as the number of messages. To learn more, reference Badge.
Content
- Write all content in sentence case, except for acronyms or proper nouns, like the application name.
- Don’t use punctuation for navigation items.
- Ensure labels match page titles to enhance the user’s understanding of the site’s information hierarchy.
- Follow all best practices and guidelines implementing links. Reference Link for more information.
- Limit labels to a few brief words to prevent unnecessary reflow.
- Reference Grammar and punctuation to learn how to use parallel structure for consistent phrasing.
