Tabs

Tabs organize related content into panels and enable visitors to navigate between them. Each panel displays one at a time.

Tabs reduce clutter by forming a unit of related content and fitting more information into a smaller space.

Sample

Tab 1 headline

This is tab 1 body text.

Tab 2 headline

This is tab 2 body text.

Tab 3 headline

This is tab 3 body text.

Tab 4 headline

This is tab 3 body text.

Tab 1 headline

This is tab 1 body text.

Tab 2 headline

This is tab 2 body text.

Tab 3 headline

This is tab 3 body text.

Tab 4 headline

This is tab 3 body text.

Usage

When and how to use it

Use tabs to group similar information on the same page. This allows visitors to switch between content without navigating away from that page or workflow to complete a task.

Use tabs when:

  • Content can be logically separated into labeled sections
  • Visitors do not need to view all the sections at once

Test your content without tabs first. It might be better to:

  • Split the content across multiple pages
  • Keep the content on a single page, separated by headings
  • Use side navigation to let users navigate quickly to specific sections of content

How not to use it

Do not use the tabs component as a form of page navigation.

Tabs hide content and not everyone will notice them or understand how they work.

Do not use tabs if your visitors need to:

  • Read through all of the content in order, like a step-by-step process
  • Compare information in different tabs

Accessibility

Standard accessibility review

Each time a new component version is published:

  • Test with the axe accessibility tool
  • Review with the VoiceOver or NVDA screen reader
  • Ensure all actionable elements are accessible by keyboard command and tab in a logical order
  • Check the component layout on a variety of screen sizes