Tabs
Tabs allow a user to access content while maintaining the existing context.
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 such as Global Sidebar. 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.
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.
