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!
<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>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 | ||
Tab 3. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Sit, accusantium!
<!-- 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>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 | ||
<!-- 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>Anatomy
Default tabs
- Icon (situational): Used as a supporting element for the tab, giving more context to the nature of the tab label.
- 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
- Icon (situational): Used as a supporting element for the tab, giving more context to the nature of the tab label.
- Label: Used to inform the user what the tab is about. Should always be short and to the point. Should always be centered.
- Number count (situational): Used as a supporting element to the tab. E.g number of notifications.
Info toggle tabs
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.
- Icon (situational): Used as a supporting element for the tab, giving more context to the nature of the tab label.
- Label: Used to inform the user what the tab is about. Should always be short and to the point. Should always be centered.
- Number count (situational): Used as a supporting element to the tab. E.g number of users.
Spacing
Default tabs
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
Within the toggle tabs
Ensure that there is at least 16px of horizontal spacing and vertical spacing within the tab.
Info toggle tabs
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
