Tabs

When to use tabs

Tabs can help users quickly switch between related information.

Use them if:

• your content can be usefully separated into clearly labelled sections
• the first section is more relevant than the others for most users
• users do not need to view all the sections at once

When not to use tabs

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

Do not use tabs if your users might need to:

• read through all the content in order, for example, to understand a step-by-step process
• compare information in different tabs - having to memorise the information and switch backwards and forwards can be frustrating and difficult

Instead, consider if it’s better to:

• simplify and reduce the amount of content
• split the content across multiple pages
• keep the content on a single page, separated by headings

How to write and structure tab content

Use clear labels

Tabs hide content, so the tab labels need to make it clear what they link to so users can decide which tab to click on.

Keep the tab labels short and descriptive, so they don’t wrap over more than one line.

Order the tabs according to user needs

The first tab should be the most commonly-needed section. Arrange the other tabs in the order that makes most sense for your users.

How tabs work

You must use ARIA role attributes to identify the tablist, tabs and tabpanels.

Tabs use active classes on both the tab and tabpanel to control which section is displayed.

We do not provide the code for the tab switching functionality as this can be done in multiple ways depending on your requirements. Instead, you must write the code in your downstream application.

The tab styles extend those defined by Bootstrap.

Types of tabs

Horizontal tabs

<div class="block">
  <div class="tabs">
    <ul class="nav-tabs" role="tablist">
      <li role="presentation"><a role="tab" id="tab-1" href="#" class="active">Tab 1</a></li>
      <li role="presentation"><a role="tab" id="tab-2" href="#">Tab 2</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" role="tabpanel" aria-labelledby="tab-1">
        <p>Tab Content 1</p>
      </div>
      <div class="tab-pane" role="tabpanel" aria-labelledby="tab-2">
        <p>Tab Content 2</p>
      </div>
    </div>
  </div>
</div>

Vertical tabs

<div class="block">
  <div class="tabs tabs-stacked-md">
    <ul class="nav-tabs" role="tablist">
      <li role="presentation"><a role="tab" id="tab-1" href="#" class="active">Tab 1</a></li>
      <li role="presentation"><a role="tab" id="tab-2" href="#">Tab 2</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" role="tabpanel" aria-labelledby="tab-1">
        <p>Tab Content 1</p>
      </div>
      <div class="tab-pane" role="tabpanel" aria-labelledby="tab-2">
        <p>Tab Content 2</p>
      </div>
    </div>
  </div>
</div>

When using vertical tabs, tabs will only display in the vertical format at the medium to extra large breakpoints. Tabs will display in the horizontal format at the extra-small and small breakpoints.