Overview

Tabs providing an efficient way for marketers to navigate and access different views or sections of content within the same context.

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.

 

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

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

 

Index tabs

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

 

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

 

Tab - Index