Tabs

View Storybook

Tabs allow users to navigation between grouped content in different views while within the same page context.

Classes

Class	Applies to	Description
.d-tablist	N/A	Parent wrapper class for the tablist.
.d-tablist--no-border	.d-tablist	Styles tablist without a bottom border.
.d-tablist--sm	N/A	Resizes the tablist to a smaller size.
.d-tablist--inverted	N/A	Inverts the tablist to work on dark backgrounds.
.d-tab	N/A	Styles each tab.
.d-tab--selected	.d-tab	Styles the selected tab.

Examples

Base Styles

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

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

First tab content panel

<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
role="tablist"	.d-tablist	A container for all tab role elements.
aria-label="Tab Title"	.d-tablist	Use to the tablist element, this provides a common, readable title for what content the tab group provides.
role="tab"	.d-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]"	.d-tab	Use on the tab element, this communicates a connection between a tab and a tabpanel.
aria-selected="[true/false]"	.d-tab--selected	Use 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]"	.d-tab	Use on the tab element, this provides a unique identifier that the tabpanel can reference with the aria-labelledby attribute.
aria-controls="[tabpanel-id]"	.d-tab	Use on the tab element, this communicates a connection between a tab and a tabpanel.
role="tabpanel"	N/A	Use on the container for content associated with a tab.
id="[unique-id]"	N/A	Use on the tabpanel element, this provides a unique identifier that the tab can reference with the aria-controls attribute.
aria-labelledby="[tab-id]"	N/A	Use on the tabpanel element, this communicates a connection between a tabpanel and a tab.
hidden	N/A	Use on the tabpanel element, use this to hide tabpanels that are not currently selected.