Tablist Preview
A tablist is a group of tabs that allow people to switch between categories of related information without going to different pages.
Tablists are ideal for dividing content-heavy pages into distinct but related categories that are easier to process and require less scrolling. Don’t break up a page with a tablist if people might need to compare information from multiple categories at once.
Tabs can also be used for navigation between a small set of closely related, frequently accessed pages. Don’t use tabs for navigation beyond a few closely related categories, and don’t use them to initiate actions. For navigation beyond closely related categories, use a link instead. To initiate an action, use a button instead.
Tablists are equivalent to Pivots in the Fluent 1 design system.
Resources
Layout
Tablists are laid out horizontally by default but can optionally be laid out vertically. Tabs in a horizontal tablist won’t scroll or wrap to the next line. This means they are limited by the width of their container. If you need to show more tabs, include an overflow menu button.
Horizontal
Vertical
Tab labels may be text-only, text with an icon, or icon-only. Choose a single format that works for all tabs in the tablist.
Tablists are less effective in smaller layouts that push several tabs into an overflow menu, making them harder to find. When space is limited, consider other options for switching content views, like an accordion or dropdown.
In smaller layouts, a dropdown might be preferable to a tablist
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 show an icon without a visible text label must include an aria-label to identify each tab to screen readers. Always include a tooltip that describes the icon to sighted users as well.
When creating a custom overflow menu button, include role=”tab” on the button element so that screen readers can identify it as a tab.
Make sure that the current selection is identified to screen raders using aria-current.
Content
Keep tab labels brief, usually a noun or short phrase is best. Tablists don’t wrap; if there isn’t enough room, additional tabs go into an overflow menu.
Keep tab labels parallel to one another, grammatically and conceptually, so they read as related categories for a single set of information.
Use sentence-style capitalization for all tab names, and no end punctuation. For more info, see Capitalization and Periods in the Microsoft Writing Style Guide.
Labels are short, parallel phrases
Don’t combine phrases that aren’t parallel