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

Sizes

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.

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.

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.