Tabs

Tabs are a navigation element resembling tabbed dividers in a filing cabinet - by clicking a tab, users can easily locate a page containing related content.

General

Example

Default tabs

Tab 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, accusantium!
Tab 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, accusantium!
Tab 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, accusantium!

HTML React Web Component 
<ul class="sgds nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab"
      aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab"
      aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab"
      aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="sgds tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Tab 1. Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Sit, accusantium!</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Tab 2. Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Sit, accusantium!</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Tab 3. Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Sit, accusantium!</div>
</div>
 [**DEV**]View on React storybook View on Web component storybook

Basic toggle tabs

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio inventore commodi iure at doloribus architecto sed animi cumque fuga quod exercitationem iste consequatur similique molestiae ab, rerum amet quam laboriosam?

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Tab 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, accusantium!

HTML React Web Component 
<!-- Add variant="tabs-basic-toggle" -->
<ul class="sgds nav nav-tabs" id="myTab" role="tablist" variant="tabs-basic-toggle">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home1" type="button" role="tab"
      aria-controls="home" aria-selected="true"><i class="bi bi-house left"></i>Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile1" type="button" role="tab"
      aria-controls="profile" aria-selected="false">
      Profile
      <span class="sgds badge bg-light text-dark right">99</span>
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact1" type="button" role="tab"
      aria-controls="contact" aria-selected="false">Contact<i class="bi bi-telephone right"></i></button>
  </li>
</ul>
<div class="sgds tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home1" role="tabpanel" aria-labelledby="home-tab">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio inventore commodi iure at doloribus architecto sed animi cumque fuga quod exercitationem iste consequatur similique molestiae ab, rerum amet quam laboriosam?</p>
  </div>
  <div class="tab-pane fade" id="profile1" role="tabpanel" aria-labelledby="profile-tab">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td colspan="2">Larry the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="tab-pane fade" id="contact1" role="tabpanel" aria-labelledby="contact-tab">Tab 3. Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Sit, accusantium!</div>
</div>
 [**DEV**]View on React storybook View on Web component storybook

Info toggle tabs

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio inventore commodi iure at doloribus architecto sed animi cumque fuga quod exercitationem iste consequatur similique molestiae ab, rerum amet quam laboriosam?

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

HTML React Web Component 
<!-- Add variant="tabs-info-toggle" -->
<ul class="sgds nav nav-tabs" id="myTab" role="tablist" variant="tabs-info-toggle">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab2" data-bs-toggle="tab" data-bs-target="#home2" type="button" role="tab"
      aria-controls="home" aria-selected="true">
      <!-- Add has-icon for label if icon is included -->
      <div class="tabs-info-label has-icon">
        <i class="bi bi-house"></i>
        Home
      </div>
      <div class="tabs-info-count">99</div>
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab2" data-bs-toggle="tab" data-bs-target="#profile2" type="button" role="tab"
      aria-controls="profile" aria-selected="true">
      <div class="tabs-info-label">
        Profile
      </div>
      <div class="tabs-info-count">99</div>
    </button>
  </li>
</ul>
<div class="sgds tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home2" role="tabpanel" aria-labelledby="home-tab">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio inventore commodi iure at doloribus architecto sed animi cumque fuga quod exercitationem iste consequatur similique molestiae ab, rerum amet quam laboriosam?</p>
  </div>
  <div class="tab-pane fade" id="profile2" role="tabpanel" aria-labelledby="profile-tab">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td colspan="2">Larry the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
 [**DEV**]View on React storybook View on Web component storybook

Anatomy

Default tabs

default tab
  1. Icon (situational): Used as a supporting element for the tab, giving more context to the nature of the tab label.
  2. Label: Used to inform the user what the tab is about. Should always be short and to the point. Should always be centered.

Basic toggle tabs

toggle tab
  1. Icon (situational): Used as a supporting element for the tab, giving more context to the nature of the tab label.
  2. Label: Used to inform the user what the tab is about. Should always be short and to the point. Should always be centered.
  3. Number count (situational): Used as a supporting element to the tab. E.g number of notifications.

Info toggle tabs

info toggle tab

Unlike the other 2 tabs, info toggle tabs are more locked down in design and interaction. It should be used as it is with change in color the only exception.

  1. Icon (situational): Used as a supporting element for the tab, giving more context to the nature of the tab label.
  2. Label: Used to inform the user what the tab is about. Should always be short and to the point. Should always be centered.
  3. Number count (situational): Used as a supporting element to the tab. E.g number of users.

Spacing

Default tabs

default tabs spacing

Within the default tabs
Ensure that there is at least 8px of vertical spacing between the text and indicator taking into account line height.

Basic toggle tabs

toggle tabs spacing

Within the toggle tabs
Ensure that there is at least 16px of horizontal spacing and vertical spacing within the tab.

Info toggle tabs

info toggle tabs spacing

Within the info toggle tabs
Ensure that there is at least 12px of horizontal and vertical spacing within the tab and 8px vertical spacing between the lable and number count.

Usage guidelines

Best practices:

  1. As a general rule, the first label for the tabs should align with the grid and the text below. If tabs are within another component, such as a card, follow the grid that you are using inside the component and align the label with text in the component.
  2. As tabs hide content, it is best to use them sparingly although they do help to save space. Do consider if the content can be displayed upfront instead of being in a tab. In some cases, having too may tabs on a page may cause it to load slowly.

Tabs should be used when:

  1. You want to expose simliar but separate content.
  2. You can separate the content into clearly labelled sections.
  3. You want to expose simliar but separate content.

Tabs should not be used when:

  1. You want to display critical information to the user, content like this should always be displayed upfront.
  2. You require users to read the content in a specific order, e.g a step by step guide.
  3. Users will need to compare information in the different tabs.

Usability guidelines

Keep labels concise
As there will be multiple tabs, it is best to keep labels as short and to the point as possible. This is particularly helpful for users of assistive technologies so they have the necessary information to efficiently navigate the content.

Behaviour
To differentiate an active tab from an inactive tab, apply an underline and colour change to the active tab’s text and icon. Tab behaviour during standard, focus, hover, and active states are important because it lets users know where they are in the experience.

Accessibility guidelines

Aria attributes

  1. The element that serves as the container for the set of tabs has role="tablist".
  2. Each element that serves as a tab has role="tab" and is contained within the element with role="tablist".
  3. Each element that contains the content panel for a tab has role="tabpanel".
  4. If the tab list has a visible label, the element with role="tablist" has aria-labelledby set to a value that refers to the labelling element. Otherwise, the tablist element has a label provided by aria-label.
  5. Each element with role tab has the property aria-controls referring to its associated tabpanel element.
  6. The active tab element has the state aria-selected="true" and all other tab elements have it set to false.
  7. Each element with role="tabpanel" has the property aria-labelledby referring to its associated tab element.

Keyboard accessibility

For the tab list
  1. Tab when focus moves into the tab list, places focus on the first tab element.
When focus is on a tab element
  1. ←, ↑ moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. This also activates the newly focused tab.
  2. ← moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. This also activates the newly focused tab.

Focus indicator

  1. Ensure all tab elements (the tabs and the tab panels) can receive keyboard focus.
  2. Provide a clear focus indicator such as using different font or background colours for the focused tab.
  3. Move focus to the active tab when it is selected.
  4. Ensure screen readers announce the active tab and the associated panel.

Tabs design tokens

$nav-tabs-border-color: transparent !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-border-radius: $border-radius !default;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
$nav-tabs-link-active-color: $gray-700 !default;
$nav-tabs-link-active-bg: $body-bg !default;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
$nav-sgds-tabs-active-border-color: $link-color !default;
$nav-sgds-tabs-padding-y: $spacer !default;
$nav-sgds-tabs-icon-padding: $spacer !default;
Last updated 02 October 2024
Home
Latest version 2.3.5