Tabs

24.6

Organizes content into separate views

Tabs

24.6

Organizes content into separate views

Overview

The Tabs component organizes content into separate views that users can navigate between without leaving the page, showing only one section of content at a time.

Usage

Tabs help organize related content into separate panels that can be accessed without navigating away from the current page, improving content organization and reducing cognitive load.

Variants

Grouped Tabs

You can group multiple pages to go under a dropdown. This should be used when there's a logical relation between pages.

Content Guidelines

Tabs are used to organize related content into clearly labeled sections. Tab labels should be concise and easy to scan so users can quickly understand and navigate between them.

We follow these basic rules while writing content for tabs:

Character limit

  • Keep tab names short and concise.

  • Use 30 characters or fewer whenever possible.

Clarity

  • Tab labels should clearly describe the content they represent.

  • Avoid vague or overly generic labels.

Casing

  • Use Title Case for tab labels.

  • Keep proper nouns as is.

Accessibility

Keyboard Navigation

  • [Tab] to navigate into the listbox.

    • Focus on the first selectable tab.

    • If a tab item is selected, focus on that one.

  • [←/→] to focus and select on previous/next tab.

  • [Tab] focuses on the next component.

  • Focus shows tooltip.

Responsiveness

Overflowed tabs stack in a N more menu

  • Selected tab is brought out from the more menu

  • For absolute minimum space, collapse everything into a
single full width button, with a label “Tab:”

Help make this page more useful.

Help make this page more useful.