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

This is a working example of tabs.

Tab 1 example

Heading example 1

When using tabs, don't use too many.

Tab 2 example

Heading example 2

When using tabs, don't use too many.

Source code

<div class="tabs">
  <ul>
    <li>
      <a href="#section1">Tab 1 example</a>
    </li>
    <li>
      <a href="#section2">Tab 2 example</a>
    </li>
  </ul>
  <section id="section1">
    <h3 class="m-t-0">Heading example</h3>
    <p>Use tabs sparingly. When using tabs, don't use too many.</p>
  </section>
  <section id="section2">
    <h3 class="m-t-0">Tab 2 heading</h3>
    <p>This is tab 2 body text.</p>
  </section>
</div>

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