Tabs
Used to group similar content.
Base Style
First tab content panel
Second tab content panel
Third tab content panel
<div class="d-tablist js-tablist" role="tablist" aria-label="Label Example Group">
<button class="d-tab d-tab--selected js-tab" role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0">First tab</button>
<button class="d-tab js-tab" role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">Second tab</button>
<button class="d-tab js-tab" role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1">Third tab</button>
</div>
<div id="panel-1" class="js-tab-panel" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
<p>First tab content panel</p>
</div>
<div id="panel-2" class="js-tab-panel" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
<p>Second tab content panel</p>
</div>
<div id="panel-3" class="js-tab-panel" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
<p>Third tab content panel</p>
</div>Classes
| Class | Description |
|---|---|
.d-tablist |
Tab wrapper |
.d-tablist--no-border |
Removes the bottom border on the tablist |
.d-tab |
Default tab style |
.d-tab--selected |
Selected tab style |
.d-tablist--sm |
Resizes the tablist to the smallest size (12px) |
.d-tablist--inverted |
Inverts the tablist so it appears on dark backgrounds |
Examples
Sizes
<div class="d-tablist d-tablist--sm">…</div>
<div class="d-tablist">…</div>Border
Add a d-tablist--no-border to remove the bottom border of any tablist. Handy for small tablists and tablists serving as subtabs to a larger menu.
<div class="d-tablist">…</div>
<div class="d-tablist d-tablist--sm d-tablist--no-border">…</div>Inverted Color
Flips the color theme of tabs to adapt for dark UIs.
First tab content panel
Second tab content panel
Third tab content panel
<div class="d-tablist d-tablist--inverted">…</div>Accessibility
To create accessible tabs, utilize the following ARIA roles to properly declare element roles, content relationships, and current status:
| Attribute | Description |
|---|---|
| role="tablist" | A container for all tab role elements. |
| aria-label="Tab Title" | Assigned on the tablist element, this provides a common, readable title for what content the tab group provides. |
| role="tab" | Indicates an interactive element within a tablist. Elements with a tab role must either be a child of a tablist or have an id part of the aria-owns property of a tablist. |
| aria-controls="[tabpanel-id]" | Assigned on the tab element, this communicates a connection between a tab and a tabpanel. |
| aria-selected="[true/false]" | Assigned on the tab element, this is set to true when it is the selected element. It is set to false when it is not selected. |
| id="[unique-id]" | Assigned on the tab element, this provides a unique identifier that the tabpanel can reference with the aria-labelledby attribute. |
| aria-controls="[tabpanel-id]" | Assigned on the tab element, this communicates a connection between a tab and a tabpanel. |
| role="tabpanel" | A container for content associated with a tab. |
| id="[unique-id]" | Assigned on the tabpanel element, this provides a unique identifier that the tab can reference with the aria-controls attribute. |
| aria-labelledby="[tab-id]" | Assigned on the tabpanel element, this communicates a connection between a tabpanel and a tab. |
| hidden | Assigned on the tabpanel element, use this to hide tabpanels that are not currently selected. |