Tabs provide a compact way to navigate between different sections of content or functional parts of an interface. Tabs appears as a strip of horizontal buttons each attached to a content pane immediately below, allowing the user to reveal a single pane at a time.
The Tabs component is used to display tabbed navigation: a user can select a tab to view its related content.
Distinguish the active and inactive tabs using more than just color. A common strategy is to use a bottom border on the active tab, along with an increase font size or weight.
If you’re using icons, ensure there is a text label to aid comprehension.
Visually connect the tab bar to the content below. It can be helpful to match the background color of the pane to the background color of the active tab.
Best practices
Tabs aren’t ideal when the customer needs to compare information between tabs. Consider another approach if this is likely.
When deciding to use either Tabs or an Accordion, consider how many groups exist. Tabs may not fit on the screen when the number of divisions is greater than 4.
If the space taken up by the tab headings exceeds the width of the screen, consider using the overflow variation.
The overflow variation is not recommended when the tab headings hidden off-screen are critical to the user experience. They’re hidden from view, and so they may be missed. If this is a concern, consider using the Accordion component instead.
Tabs should always be shown with the first panel opened by default, unless specified by a previous action.
Tabs have a natural hierarchy where the first pane is more prominent than the closed panes. If this hierarchy is not suitable for the user experience on the page, consider another component.
Organize the panes so that they transition left and right like a carousel, mirroring the order of their corresponding tabs.
Keep tab headings concise. If necessary, use two lines instead of hiding text off-screen.
Avoid complex interaction journeys within tabs. Having too many additional actions within a tab can disorient users within their journey.
Don’t nest tabs within tabs.
Be careful of using full-width dividers or background color switches within tab panes, as they could be mistaken as the end of the content in that tab.