Status
| PublishedElement can be used in production | |
| PublishedElement can be used in production | |
Angular | In backlogElement is in backlog |
React | In backlogElement is in backlog |
Documentation | PublishedElement can be used in production |
Tabs
Tabs help organize similar types of content on a screen and allow users to move easily between alternate views within the same context.
Contents
What's newCopy link to this section
Copy link to this section
The tab component has been updated to reflect the new foundational styles and now incorporates additional accessibility considerations. The design, behavior, and usage guidelines for the overflow state are also new.
AnatomyCopy link to this section
Copy link to this section
Contained
Contained tabs are links with a white background container indicating the current tab. They include a current tab indicator at the top of the tab.
- Selected tab: includes a Blue 600 tab indicator, a white background, and the tab label.
- Rest tab: unselected container with transparent background and tab label.
Inline
Inline tabs are links without the white container for the tab label, and include a selected state indicator at the bottom of the selected tab label.
- Selected tab: includes a Blue 600 tab indicator at the bottom of the tab and label.
- Rest tab: unselected tab with label.
Responsive stacked view
For XS to S (extra-small to small) grids for mobile screens, tabs display as a vertical list. The selected tab content fills the screen and presents a back option to return to the tab list. In the UI kit, the “first state” displays a top divider.
- First state tab: includes a Gray 300 divider above the first tab.
- Tab label: a concise title representing the tab’s content.
- Selected tab: slides open a panel with a linked tab label and a back arrow.
ArticlesCopy link to this section
Copy link to this section
Contents
Contents
UsageCopy link to this section
Copy link to this section
Content
Tab content should have parallel context, meaning the subject and category of a tab group should relate. If the tabs are significantly dissimilar, users may interpret them as site navigation.
Labels
Tab labels should be brief. Use one to two words for the tab label. The labels should also accurately describe the content associated with each tab.
Grouping
Group content logically within tabs so users can easily predict what each tab contains. If users need to view all the content within the tab containers at once, consider using an alternate navigation experience.
Limitations
Try to limit the number of tabs to avoid triggering the overflow state. Stick to only one row of tabs. Multiple rows create jumping user interface (UI) elements and make it difficult for a user to understand and orient the information the tabs are presenting.
If an overflow state on desktop is unavoidable, add a “more” tab with a dropdown containing the additional tabs that do not fit on screen. Horizontal scroll on desktop applications is not recommended as it’s difficult to predict where the end of the screen is with a cut-off component. It is also not as easy or ergonomic to scroll horizontally on a desktop.
Order
Tab order should be applied consistently across the experience. The selected or default tab should show the first or most important thing a user should see. Tabs with closely related content should be grouped next to each other.
Stacking
Use responsive, stacked tabs for contained tab scenarios, with three or more tabs visible on extra-small and small screens. Stacked tabs are ideal for complex content.
KindsCopy link to this section
Copy link to this section
Options
Icons
Both inline and contained tabs have the option to add a leading or trailing icon next to the label. Do not use icons on both sides of the tab label, and do not use icons and images together on a tab. Make sure all icons have the same orientation on each tab.
Inline and contained tabs with leading icon placement before the tab label.
Inline and contained tabs with trailing icon placement after the tab label.
Images
There is an option to add an 80-by-80 pixel image to an inline tab, which also displays in the responsive, stacked view of the tab. Do not add both images and icons to inline tabs.
An inline tab with an 80-by-80 pixel image above the tab label.
The responsive, stacked view of an inline tab with an 80-by-80 pixel image.
LayoutCopy link to this section
Copy link to this section
Tab overflow
To avoid overwhelming users by presenting too many options, try limiting the number of tabs to six. If more than six are required, consider using a different type of navigation. With long labels that extend past a word or two, the text truncates and a browser label will feature the full text. Depending on the number of tabs, the length of the labels, the device, and the screen and grid size, an overflow state in an action menu dropdown, labeled “More” appears. Selecting “More” displays the additional tabs.
An overflow tab with a dropdown presenting the additional tab labels.
Responsive overflow option
The default tab design for small breakpoints using the XS or S (extra-small to small) grids is the stacked view. An alternate, horizontal layout is available for overflow tabs on mobile. Additional tabs are implied by a dark-to-light color gradient on the tab label overhang. The color gradient provides the user with a visual signal that a horizontal swipe-to-scroll interaction will reveal additional tabs. This option is intended for mobile experiences with few tabs and short labels.
Responsive, horizontal overflow scroll behavior, featuring a dark-to-light color gradient.
InteractionCopy link to this section
Copy link to this section
Behavior and states
| State | Behavior |
|---|---|
| Selected | The selected or current tab label and indicator line are Blue 600, regardless of the type of tab. For XS to S (extra-small to small) grids, the tab label is Gray 800 when in the stacked view. |
| Rest | For tabs in the rest state, the tab label should be Gray 800. For the contained variant, inactive tabs also include a gray line outlining the tab. |
| Hover | For both inline and contained tabs, the tab background changes to Gray 100, and the text icons change to Blue 600. |
| Focus | The focus state adds a Blue 800 outline around the tab area and the text changes to blue. It also includes a white border on the inside. |
StandardsCopy link to this section
Copy link to this section
Content
Capitalization and case
Use sentence case (capitalize only the first word) unless referring to a proper noun.
Punctuation
Do not punctuate tab labels.
Tab labels
Write short tab labels and use plain language. Try to keep the label text to one or two words. Short labels are more scannable. If you need longer labels, it may be a sign that the categories are too complicated for a tab control. Keep in mind that the character length of a label will affect the width of the tab, and potentially cause other tabs to move into overflow.
Contents
Contents
Live demoCopy link to this section
Copy link to this section
This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.
You are now entering a live demo of the component.
<div class="dds__tabs" data-dds="tabs">
<div class="dds__tabs__list-container">
<ul class="dds__tabs__list dds__tabs__list--overflow" role="tablist">
<li role="none">
<button id="tab-1-0" class="dds__tabs__tab" role="tab" aria-controls="tab-1-0-pane" aria-selected="true" tabindex="0">
<span class="dds__tabs__tab__label" title="Tab 0">Tab 1</span>
</button>
</li>
<li role="none">
<button id="tab-1-1" class="dds__tabs__tab" role="tab" aria-controls="tab-1-1-pane" aria-selected="false" tabindex="-1">
<span class="dds__tabs__tab__label" title="Tab 1">Tab 2</span>
</button>
</li>
<li role="none">
<button id="tab-1-2" class="dds__tabs__tab" role="tab" aria-controls="tab-1-2-pane" aria-selected="false" tabindex="-1">
<span class="dds__tabs__tab__label" title="Tab 2">Tab 3</span>
</button>
</li>
<li role="none">
<button id="tab-1-3" class="dds__tabs__tab" role="tab" aria-controls="tab-1-3-pane" aria-selected="false" tabindex="-1">
<span class="dds__tabs__tab__label" title="Tab 3">Tab 4</span>
</button>
</li>
<li role="none">
<button id="tab-1-4" class="dds__tabs__tab" role="tab" aria-controls="tab-1-4-pane" aria-selected="false" tabindex="-1">
<span class="dds__tabs__tab__label" title="Tab 4">Tab 5</span>
</button>
</li>
<li role="none">
<button id="tab-1-5" class="dds__tabs__tab" role="tab" aria-controls="tab-1-5-pane" aria-selected="false" tabindex="-1">
<span class="dds__tabs__tab__label" title="Tab 5">Tab 6</span>
</button>
</li>
<li role="none">
<button id="tab-1-6" class="dds__tabs__tab" role="tab" aria-controls="tab-1-6-pane" aria-selected="false" tabindex="-1">
<span class="dds__tabs__tab__label" title="Tab 6">Tab 7</span>
</button>
</li>
</ul>
</div>
<div class="dds__tabs__pane-container">
<div id="tab-1-0-pane" class="dds__tabs__pane" role="tabpanel" tabindex="0" aria-labelledby="tab-1-0" aria-hidden="false">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi maxime magnam veritatis. Repellat, deserunt adipisci aspernatur
blanditiis reiciendis porro doloribus non sed vel optio, culpa dolor nisi impedit qui ipsum nobis est autem neque quod iusto iure.
Assumenda reiciendis temporibus sint, sequi, explicabo esse ducimus, soluta tenetur voluptas impedit quasi?
</p>
<p>
Maiores facilis beatae non quo, sequi sit eos quod dolorem accusantium optio odit saepe minima laboriosam enim nisi vel sint
assumenda nobis eveniet libero? Beatae quisquam deserunt a dolorem ab, hic ratione accusantium accusamus vitae, illo dolore, maxime
provident consequatur atque architecto laborum ullam velit maiores? Repellat commodi hic facilis?
</p>
</div>
<div id="tab-1-1-pane" class="dds__tabs__pane" role="tabpanel" tabindex="-1" aria-labelledby="tab-1-1" aria-hidden="true">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta soluta exercitationem saepe a sint! Quas labore animi illo dolor
fuga saepe ad commodi nemo inventore laudantium culpa eaque est recusandae, tempora quasi, aperiam modi iusto sapiente aliquam
accusantium eveniet quo et rem fugiat. Corporis, nihil? Reprehenderit odio maxime consectetur saepe.
</p>
</div>
<div id="tab-1-2-pane" class="dds__tabs__pane" role="tabpanel" tabindex="-1" aria-labelledby="tab-1-2" aria-hidden="true">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur impedit iste rerum nemo aperiam eos veniam ad illo doloremque
alias mollitia deserunt excepturi aut iure libero, soluta magni quis beatae quos quasi expedita obcaecati voluptate molestias?
Vitae, velit? Ducimus, perferendis!
</p>
<p>
Cum beatae deleniti explicabo fugit rem voluptate? Quo necessitatibus, velit nemo perferendis cupiditate dolor aut veniam officia,
architecto at quaerat blanditiis itaque! Sunt, voluptates pariatur! Numquam sapiente illo quisquam. Commodi adipisci nobis
voluptatibus necessitatibus. Adipisci, reprehenderit? Natus animi vitae nobis.
</p>
<p>
Quibusdam debitis laborum dolorem atque eos ea, harum sequi perspiciatis aspernatur magnam incidunt nisi labore non reiciendis hic,
voluptatem veniam voluptatibus iusto nostrum! Aspernatur illum optio quidem eius modi itaque nemo voluptatum! Aut fuga atque
eligendi, nam asperiores quos nulla!
</p>
</div>
<div id="tab-1-3-pane" class="dds__tabs__pane" role="tabpanel" tabindex="-1" aria-labelledby="tab-1-3" aria-hidden="true">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusantium voluptate commodi reiciendis a temporibus excepturi hic,
officiis at? Qui inventore similique eveniet omnis unde, voluptas ipsa asperiores fugiat deleniti dolores ut vitae ratione soluta
consequatur vero esse consectetur ducimus distinctio iste quo minus deserunt eligendi autem! Libero excepturi facilis officiis.
Quidem itaque quaerat nulla debitis, quae culpa voluptate iusto possimus a deleniti, impedit magni earum blanditiis aliquid atque
illum tempora sequi! Sapiente consectetur pariatur repudiandae aut autem quasi dolor ullam. Non molestias nisi a optio voluptatum
incidunt fugit id, nam delectus, neque consequuntur, illum aspernatur totam harum et at.
</p>
</div>
<div id="tab-1-4-pane" class="dds__tabs__pane" role="tabpanel" tabindex="-1" aria-labelledby="tab-1-4" aria-hidden="true">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam cum placeat, voluptate eum quibusdam, impedit beatae quo, minima
praesentium consequuntur culpa quos iste fugit ut veniam facere? Velit vero, sint eligendi pariatur quas voluptatem modi minus
repudiandae ea tenetur atque consectetur quaerat voluptas labore nihil error repellendus impedit temporibus! Modi reiciendis
architecto ex cupiditate corporis quisquam itaque, totam rerum quod sequi, atque similique esse aliquam aliquid. Nam, asperiores
culpa dignissimos sunt vel doloribus, a error libero ut enim veritatis inventore?
</p>
<p>
Earum temporibus, porro, nemo quia quae dignissimos fugit ipsa delectus incidunt sint quidem voluptatem. Tenetur illum ratione
iusto. Quia reprehenderit asperiores rem molestiae dolore ex corporis quas officiis maxime cupiditate perferendis nulla, iste
praesentium natus! Mollitia quam, quo ipsam neque doloribus dolor quidem voluptatum illum voluptate inventore adipisci? Possimus
numquam esse, sequi maiores inventore cupiditate tempora itaque hic facere nulla nam alias reprehenderit fuga omnis quia beatae
expedita molestiae illo laborum quisquam aliquid nesciunt! Illum consequatur rem necessitatibus odit hic!
</p>
<p>
Eum accusamus neque, accusantium dolores vitae numquam, est minima necessitatibus, facilis ab fugiat? Veniam delectus aliquid fugiat
maiores facilis similique, reiciendis exercitationem unde ullam voluptate doloribus officia esse? Laborum at, facilis quo eligendi
neque quidem nemo labore vero, aperiam illo illum ducimus cupiditate assumenda sequi voluptate iure sapiente molestiae nisi sunt
dolore minus aliquid officia? Dolor quibusdam doloremque eaque molestias ullam nemo nihil eos voluptates labore soluta enim incidunt
itaque praesentium facere totam mollitia illo commodi, delectus quia accusantium animi?
</p>
</div>
<div id="tab-1-5-pane" class="dds__tabs__pane" role="tabpanel" tabindex="-1" aria-labelledby="tab-1-5" aria-hidden="true">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, repellendus, reiciendis accusamus nulla aliquid quidem amet est
recusandae id quia voluptates eius accusantium nihil neque illo esse eligendi hic! A temporibus, eum in assumenda labore tempore hic
consectetur! Ipsam doloribus, maxime dolor quod quidem expedita in voluptate, consequuntur inventore suscipit iste facilis explicabo
similique molestias est praesentium, reprehenderit accusantium! Incidunt sapiente repellendus voluptas eligendi ut provident fuga
possimus distinctio necessitatibus.
</p>
<p>
Quis enim reprehenderit ducimus quas ipsum quibusdam hic, vero laboriosam. Impedit quo doloremque maiores, quas, voluptatibus sed
aliquam necessitatibus iste ad culpa accusamus reprehenderit adipisci fuga? Doloribus sint ad et id numquam natus, voluptatem quos
aliquid at tenetur exercitationem. Expedita nulla consequuntur eveniet laudantium aperiam assumenda commodi sunt, repudiandae quos!
Iusto reprehenderit ratione magnam itaque, asperiores porro, blanditiis iste quis officiis repudiandae id optio rem ipsum,
praesentium laboriosam ad enim.
</p>
</div>
<div id="tab-1-6-pane" class="dds__tabs__pane" role="tabpanel" tabindex="-1" aria-labelledby="tab-1-6" aria-hidden="true">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim at, neque animi harum repellendus laboriosam similique ea, beatae,
modi ratione asperiores? Veniam consectetur natus porro?
</p>
<p>
Ullam, voluptatem! Tenetur consequatur exercitationem unde cupiditate reprehenderit praesentium, quo, nemo perferendis omnis
voluptatibus, possimus rem sequi. Ullam aliquid reprehenderit at voluptatum, pariatur nulla dignissimos.
</p>
<p>
Dolore nihil inventore esse beatae nulla obcaecati earum ab consequuntur consectetur. Illo facere iusto asperiores sunt a officia
autem doloribus optio ad laboriosam, animi porro.
</p>
<p>
Ad quasi quae architecto officiis expedita soluta commodi eaque saepe. Voluptatum, laborum perspiciatis natus magni dicta expedita!
Assumenda unde reprehenderit sapiente eum qui molestias doloremque!
</p>
</div>
</div>
</div>