Tabs providing an efficient way for marketers to navigate and access different views or sections of content within the same context.
🟢 Nav tab group
Design
Structure
Tabs consist of two main elements: the tab list and the tab panels.
Tab group: A row or list of clickable tab items that represent the different sections available for view.
Tab content: The content areas tethered to each tab item. Only one tab panel is visible at a time, corresponding to the active tab.
Types
Horizontal tabs: The most common variant, suitable for most use cases, where tabs are arranged horizontally above the content.
Vertical tabs: Used in cases where screen real estate allows or requires a vertical layout, with tabs aligned on the side of the content.
Horizontal tabs
Vertical tabs
Variants (horizontal only)
There are two variations for the horizontal tab based on the location and context that they are used.
Navigation tabs (default): the most common variant, used to separate a page into different tabs of content. Generally found under the Page Header or Header nav.
Index tabs: A variant found on index pages that place more emphasis on the current tab, which is generally used as a parent filter for the underlying content
🟢 Nav tab group
🟢 Index tab group
States
Active: The currently selected tab, visually distinct to indicate its content is displayed.
Inactive: Tabs that are not currently selected.
Hover: A visual change when the user hovers over a tab with the mouse.
Focus: A state to indicate keyboard navigation focus, distinct from hover and active states.
Disabled: Tabs that are temporarily not interactive.
Nav tabs
Inactive
Hover (inactive)
Active
Hover (active)
Inactive (disabled)
Index tabs
_Parts / Index tab / :hover=False, :active=False, :disabled=False
_Parts / Index tab / :hover=True, :active=False, :disabled=False
_Parts / Index tab / :hover=False, :active=True, :disabled=False
_Parts / Index tab / :hover=False, :active=False, :disabled=True
Guidelines
Use cases
Grouping related content into distinct sections within the same view
Accessing different Journey details in Studio, like Journey information, Exit criteria, and Goals
Filtering content or metric pages within Messaging Insights
Switching between different types of Alert configurations in project settings
Do
Always place tabs at the top or left side of the content they relate to
Use concise, descriptive labels that clearly communicate the content of each tab panel
Ensure the active tab is visually distinct from inactive tabs, particularly when the background of the container it's placed in is not bgPrimary or bgSecondary
Don't
Don't nest tabs beneath tabs; if additional content segmentation is needed, default to Nav tabs first, then a vertical variant below
Don't use tabs for navigation to different pages or unrelated content areas.
Avoid using too many tabs that exceed the available screen width or height, leading to a poor user experience.
Do not disable tabs without a clear indication of why they are disabled and how to enable them.
Content
Labels should be clear and concise, ideally one to two words
Use all caps or title case for tab labels based on your design system's typography guidelines
Ensure content within each tab panel is relevant to its label and easily distinguishable from other tabs
Accessibility
Keyboard Navigation: Tabs should be navigable using the arrow keys, with the Tab key moving focus in and out of the tab list.
ARIA Roles and Attributes: Use appropriate ARIA roles (tab, tablist, tabpanel) and attributes (aria-selected, aria-controls, aria-labelledby) to ensure screen readers correctly interpret the tab interface.
Focus Management: Ensure that focus moves to the content of the active tab panel when a new tab is activated.
Visible Focus Indicator: Provide a visible focus indicator for keyboard navigation to assist users with limited mobility or visual impairments.
Health
Tab - Navigation
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova