When to use
The usage depends on the type of tabs (see the overview page).
Classic tabs separate related content into different sections or categories, allowing users to navigate between them. This helps enable users to focus on one category at a time, reducing cognitive load. To summarize, use classic tabs to:
- Group related content into different categories, helping to reduce cognitive load;
- Organize content on a single page to prevent users from navigating away.
Segmented tabs (also referred to as segmented controls) can be used to:
- Switch between views of the same information. For example, switching between a list or map view for locations or switching between a time period for chart views.
Layout and positioning
For users to instantly recognize what they're looking at, the tabs and related content should be in close proximity. Therefore, tabs are always positioned directly above the related content. As soon as the user navigates between tabs, the content will change instantly to match the active tab.
Classic tabs should occupy the full width of the containing element, while each individual tab occupies a width based on its content. The total width of segmented tabs is always based on their content.