Tabs
Tabs are useful for organizing and presenting different sections of content or information within a page.
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!
<ul class="cgds 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="cgds 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?
| # | Family Name | Given Name | Handle |
|---|---|---|---|
| 1 | Chan | Somontha | @smt |
| 2 | Sok | Mealdey | @md |
| 3 | Cutie Jessica | @neth | |
Tab 3. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Sit, accusantium!
<!-- Add variant="tabs-basic-toggle" -->
<ul class="cgds 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="cgds 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="cgds 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">
<caption>Profile</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Family Name</th>
<th scope="col">Given Name</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Chan</td>
<td>Somontha</td>
<td>@smt</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Sok</td>
<td>Mealdey</td>
<td>@md</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Cutie Jessica</td>
<td>@neth</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?
| # | Family Name | Given Name | Handle |
|---|---|---|---|
| 1 | Chan | Somontha | @smt |
| 2 | Sok | Mealdey | @md |
| 3 | Cutie Jessica | @neth | |
<!-- Add variant="tabs-info-toggle" -->
<ul class="cgds 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="cgds 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">
<caption>Profile</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Family Name</th>
<th scope="col">Given Name</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Chan</td>
<td>Somontha</td>
<td>@smt</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Sok</td>
<td>Mealdey</td>
<td>@md</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Cutie Jessica</td>
<td>@neth</td>
</tr>
</tbody>
</table>
</div>
</div>
Anatomy
Default tabs
- Label: Used to inform the user what the tab is about. Should always be short and to the point. Should always be centered.
- Indicator: a subtle line under the tab label to indicate the active tab.
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 two tabs, info toggle tabs is 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 8px of 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 label and number count.
Usage guidelines
Tabs should be used:
- When you want to expose similar but separate content.
- When you can separate the content into clearly labeled sections.
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 many 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-cgds-tabs-active-border-color: $link-color !default;
$nav-cgds-tabs-padding-y: $spacer !default;
$nav-cgds-tabs-icon-padding: $spacer !default;