Tabs

Tabs can be used to rapidly navigate between different content while maintaining the existing context. The Tabs component serves as the outer wrapper and contains individual Tab components as children.

To create a set of Tabs, use the Tabs component as the outer wrapper with Tab components as its children. Providing a title prop to a Tab will populate the text on the actual tab. The children of each Tab will be the content that displays when the given tab is active.

It is recommended that you do not use more than 5 tabs in a group. In order to create the most effective user experience, keep the number of tabs to a minimum. This allows the user to easily understand the scope of the information presented to them. With more tabs, the information can become overwhelming.

Keep labels short. Using a simple, concise label such as "Settings" or "Notifications" helps the user easily decide which tab contains the content they need. Longer labels may clutter the layout and create a more effortful experience for the user.

If using Tabs as a navigation structure, be sure to connect them to the browser location. This will allow proper active styling and routing to function.

If using Tabs as a navigation structure, don't use them in conjunction with other navigation structures. Combining multiple navigation structures creates a confusing experience for the user. It can lead to difficulties in navigating through an application and in ability to remember where desired content lives.

To maintain a clean, consistent presentation, all content should be aligned to the left edge of the Tabs component.

• Apply justify="start" to left-align the tabs and have their bottom border extend the full-width of the parent container.
• Content within the Tab should be flush with the left edge of the Tabs component and have a vertical padding of medium to provide spacing and room for the content to breathe.

When horizontal space is limited, only the Tabs that fit will be displayed. The remaining Tabs can be accessed by using the previous and next arrows or with the keyboard.

• Previous and next arrows will be present if the horizontal Tabs are fully outside the viewport.
• Previous and next arrows are disabled if the horizontal Tab has no more Tabs to view towards the left or right.
• Clicking on the previous and next arrows will show additional Tabs. At xsmall and small breakpoints the arrows will show 1 additional Tab. At medium, large, or xlarge breakpoints, clicking the arrows will show 3 additional Tabs.

Accessibility features such as role and aria-selected are built into Tabs. When a tab is selected, aria-selected is switched to true and toggled to false for all other tabs within the group.

If you would like to provide a custom aria-label for screen reader users, you can do so by providing a string to the a11yTitle prop.

Tabs can be used to control what information is presented to a user at a given time. They are effective for grouping information and allowing users to move between those groups without leaving their existing context.

An icon can be used on a Tab to provide additional context about the information contained within the tab. It is recommended that an icon is used in conjunction with a title to ensure the context of the tab is clear.

An individual Tab can take on various states: enabled, disabled, hover, and active. The styling of a tab differs between each of these states as an indicator to the user.