Tablist Preview

A tablist is a group of headers, or tabs, that lets people navigate between different views of related information without going to different pages.

Tablists are great for fitting a lot of information in a small space. They can help reduce scrolling by chunking related information into categories for easier processing. Don't use tablists if it's helpful for people to compare information from two different views.

Layout

Tablists are laid out horizontally by default but can optionally be laid out vertically. Horizontal tablists are limited by the width of their container; tabs won’t scroll or wrap onto the next line. If you need to show more tabs, include an overflow menu button.

Horizontal

Vertical

Tablists are not always effective in smaller layouts. Where there’s limited real estate, consider other options for switching content views, like accordions or dropdowns.

Behavior

Default selection

By default, one tab (usually the first) should always be active on first render. Keep this in mind when ordering your content. Use defaultSelectedValue to define the default active tab.

Accessibility

Tabs that use an icon only must include an aria-label to identify the tabs to screen readers. Always include a tooltip that describes the icon.

When creating a custom overflow menu button, include role=”tab” on the button element so that screen readers can identify it as a tab.

Content

Keep tab labels brief, usually a noun or short phrase is best. Use sentence-style capitalization and skip the period. For more info, see Capitalization and Periods in the Microsoft Writing Style Guide.