Tabs

Overview

Tabs are navigation elements at the top of the page, used to switch between different groups of related content on a page.

When to use:

Breaking up a page’s content into distinct chunks or tasks.
Navigating between groups of content that are related and at the same level of hierarchy.

Implementation

Edit the code below to see your changes live!

Props

Prop name	Type	Default	Description
`activeTab`	`string`		Determines the active tab by tab id.
`items`	`TabItem[]`		See TabItem for usage.
`onTabClick`	`(tabId: string) => void`		Function that will get called when a tab is clicked.

Props ending with * are required

Do's and Don'ts

Do
Place `Tabs` with related content next to each other, and place in an order that is conducive to the user’s success in the experience.
If using the same `Tabs` for different pages, keep tab order consistent.
Make the tab label succinct and descriptive of the content within it.
Ensure `Tabs` relate to each other and organize the page’s content in a meaningful way.
Use `Tabs` to switch between related content.
Use the `ariaControls` prop to match your content with the `TabItem` that displays it.

Don't
Don’t use more than eight `Tabs` per page. If more than eight `Tabs` are needed, consider other types of navigation or content organization.
Don’t use more than 4 words to label each `Tab`.
Don’t use icons in tab labels.
Don’t use `Tabs` to filter content on a page, instead use PillTabs.