Tab

Short intro to component

Tab - Index

Healthy
Show details
Healthy
Published: February 21, 2024
Updated: February 21, 2024

 

Tab - Navigation

Healthy
Show details
Healthy
Published: February 21, 2024
Updated: February 21, 2024

 

 

Overview

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

🟢 Nav tab group

🟢 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

Horizontal tabs

Vertical 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

🟢 Nav tab group

🟢 Index 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

Inactive

 Hover (inactive)

Hover (inactive)

Active

Active

Hover (active)

Hover (active)

Inactive (disabled)

Inactive (disabled)

 

Index tabs

_Parts / Index tab / :hover=False, :active=False, :disabled=False

_Parts / Index tab / :hover=False, :active=False, :disabled=False

_Parts / Index tab / :hover=True, :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=True, :disabled=False

_Parts / Index tab / :hover=False, :active=False, :disabled=True

_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

 

  • 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 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

Storybook

Includes a link to an external code repository

-

Status

The component has a health status indicated

Healthy

 

Tab - Index

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

Storybook

Includes a link to an external code repository

-

Status

The component has a health status indicated

Healthy