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.

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>
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>
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>
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

Tabs should be used:

  • When you want to expose simliar but seperate content.
  • When you can seperate the content into clearly labelled sections.
  • When you want to expose simliar but seperate content.

Tabs should not be used:

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

Usability guidelines

Keep labels short
As there will be multiple tabs, it is best to keep labels as short and to the point as possible.

Use sparingly
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.

Do not use as a form of page navigation
Tabs should exclusively be used as a form of content navigation within a given page.

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 22 November 2023
Home


Latest version 2.2.0