Tabs
Tabs are graphical elements usually arranged like column headings. They allow a user to access various sets of content without leaving their current page.
Guidance
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.
Usage
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.
Alignment
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.
Responsive Tabs
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.
Responsive behavior
- 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
andsmall
breakpoints the arrows will show 1 additional Tab. Atmedium
,large
, orxlarge
breakpoints, clicking the arrows will show 3 additional Tabs.
Resize your window to see how Tabs adapts when there is not enough room to display all of the Tabs.
Accessibility
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.
Variants
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.
Tabs with icons
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.
Tab states
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.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.