Tabs
View StorybookTabs allow users to navigation between grouped content in different views while within the same page context.
Classes
| Class | Applies to | Description |
|---|
Examples
Base Styles
<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>
Sizes
<div class="d-tablist">…</div>
<div class="d-tablist d-tablist--sm">…</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 d-tablist--no-border">…</div>
<div class="d-tablist d-tablist--sm d-tablist--no-border">…</div>
Inverted
Add d-tablist--inverted when you want to display tabs on a darker background.
<div class="d-tablist d-tablist--inverted">…</div>
Accessibility
To create accessible tabs, be sure to implement the proper keyboard navigation and utilize the following ARIA roles to properly declare element roles, content relationships, and current status:
| Item | Applies to | Description |
|---|