💠 Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Account
Make changes to your account here. Click save when you're done.
Usage
Tabs organize content across different screens, data sets, and other interactive elements into separate sections with layered navigation. It’s a way to allow users to peruse a set of tab panels one at a time.
Each tab is typically associated with a pane of content and when a user selects a tab, the associated content or panel is displayed, while others remain hidden.
When to use
- Content Organization: Use Tabs when you have multiple content areas that are related and of equal importance, which need to be displayed separately to avoid overwhelming the user.
- Space-saving: Employ Tabs as a means to save space on the page while still making all content easily accessible.
- Sequential Information: When content naturally flows from one subject to the next, Tabs can segment the information in a logical manner.
- Feature or Data Segmentation: Use Tabs to segregate different features, options, or datasets that users can navigate between without leaving the page.
Avoid using Tabs for unrelated content that doesn’t require a clear separation within the same context. Tabs should not be used for primary navigation within an application where a more persistent form of navigation is needed. Additionally, avoid using Tabs when the content within each tab panel is too vast or complex, as this can lead to a cumbersome user experience.
Examples
Default
Default value
Disabled
With icon
With card
Account
Make changes to your account here. Click save when you're done.
Useful links
Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:
Accessibility
Keyboard interactions
| Key | Description |
|---|---|
Tab | When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content. |
ArrowRight | Moves focus to the next trigger and activates its associated content. |
ArrowLeft | Moves focus to the previous trigger and activates its associated content. |
Home | Moves focus to the first trigger and activates its associated content. |
End | Moves focus to the last trigger and activates its associated content. |