Tabs
Organizational element that separates content and allows users to switch views.
Tabs are organizational elements that group related content. They help users navigate between sections of content by switching views within the same page or container.
Also known as: Tabbed interface, tab group, TabLayout (Android), TabItem (Android).
Anatomy
A. Label (required): Brief text describing the tab content.
B. Icon (optional): Icon used to represent the tab.
C. Active tab visual indicator (required): Visual indicator showing the tab currently in view.
Usage
| Component | When to use | When not to use |
|---|---|---|
| Vertical | When there are more categories of content and longer tab labels. | If your interface has limited vertical space. |
| Horizontal | When there are fewer categories of content and shorter tab labels. | When the tab labels are long and can lead to truncation of text. |
| Stacked | When tab labels are short and concise and using icons helps call attention to the content. | When tab labels are longer and icons don’t add additional context. |
Best practices
- Reference Application layouts for help deciding which navigation component is best for your use case.
- Organize tabs in a logical order, such as placing the most frequently accessed tabs at the beginning.
- Clearly indicate the active tab to help users understand which tab is related to the information presented.
- Limit the number of tabs to avoid overwhelming users. If you have more than five tabs, consider using a different navigation pattern.
- Avoid displaying disabled tabs without providing an explanation for why the tab is disabled.
Vertical tabs
Vertical tabs are arranged in a single column on the left side of the content area for left-to-right languages. They’re ideal for interfaces with long tab labels or when there are many categories of content.
- Place the vertical tabs on the left side of the content area to align with common left-to-right reading patterns.
- Ensure the tab list is scrollable if necessary to prevent overwhelming users with too many choices at once.
- Consider using a nav menu to group related tabs and reduce clutter.
Note: Nav menus are built using a modified dropdown menu component. For accessibility reasons, don’t use the default dropdown menu or replace it with a select component. Always consult with accessibility partners before modifying the behavior of any component.
Horizontal tabs
Horizontal tabs are arranged in a single row at the top of the content area. They’re best used when there are fewer categories of content and shorter tab labels to avoid truncation.
- Limit the length of tab labels to avoid wrapping or truncation.
- Avoid using more than five to seven tabs.
- Ensure horizontal tabs adapt to different screen sizes. Consider using a nav menu for additional tabs on smaller screens.
Stacked tabs
Stacked tabs are similar to horizontal tabs except they include an icon above the tab label. These are best used when more context could be added to tabs using by icons to represent the label in more detail.
Do Maintain visual consistency between tabs.
Don't Mix visual treatments for tabs by using icons inconsistently.
Behaviors
Tabs have various behaviors designed to make content easy to understand and interact with.
Tabs for in-page content
The expected behavior of tabs is to enable users to access different information within a single page area. They should be positioned below the page title to prevent confusion with site navigation. Place related tabs next to the corresponding content and apply visual styling to emphasize their relationship.
- Place tabs near their related content.
- Use visual styling to clearly indicate the active tab.
Do Use tabs for related content within the same page.
Don't Use tabs to navigate to unrelated content on different pages.
Scaling and reflow
Scaling and reflow refer to how tabs behave as the container size changes, especially when the container is too small to display all content at once. Tabs should adjust responsively to maintain usability and clarity, wrapping or reflowing as needed to fit within the available space.
- Ensure consistent margins and 6 px padding between tab elements to maintain a clean and organized layout.
- Ensure tabs are responsive and adapt to different screen sizes without causing truncation or hiding content.
Platform considerations
Mobile
Tabs as navigation
While the typical expected behaviors for tabs is to switch between views within the same page, they can also be used as the basis for navigation components, like tab bar. When implemented as a tab bar, switching tabs takes users to a new page.
Fixed width
When space and content allows, tab groups on small screens can extend to the width of the screen. Both native mobile and responsive web applications can use this layout.
Scrollable tabs (touch devices)
Tabs may overflow horizontally on touch devices, allowing users to scroll through them. This layout isn’t for use on desktop devices.
Stacked tabs (non-touch devices)
In the rare instance of a small screen without touch capabilities, tabs may be stacked on top themselves. Consider using an accordion instead of tabs to save space.
Content
- Write all content in sentence case, except for acronyms or proper nouns, like the application name.
- Don’t use punctuation for tab labels.
- 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.
