Tabs

Tabs are used to group related content within the same page. This allows the user to focus on one set of content at a time without having to scroll through page sections or navigate to another page. Tabs can be used in place of adding another level of navigation.

Tabs and accordions are very similar ways of structuring information. Here are some guidelines for deciding when to use tabs or accordions or when to consider another solution:

When to use tabs:

• If there is a small number of categories that are unlikely to change or expand
• If the content needs a larger area or the whole page
• If the categories should function more like navigation than a show / hide toggle

When to use an accordion:

• If there are too much related information to show within a limited space
• If the information is overwhelming when displayed all at once
• If the information can be grouped into logical categories
• If the user does not need to see all the information at once

When to consider something else:

• If there is enough space to show the content all the time
• If the content makes more sense when viewed at once
• If the user is likely to read all the content
• If the content cannot be logically grouped into tabs or accordions

Do not use this component on assertive, assertive gradient, or accent container backgrounds.

The tabs will scroll horizontally if the navigational items do not fit within the viewport. An overflow dropshadow style will appear on the right of the tab container to indicate that the user can scroll to see more tabs.

The producer must apply the overflow style on each breakpoint where the tabs overflow. The style will stay applied, whether the content overflows or not, until the viewport sizes out of that breakpoint. This style is available for both the secondary navigation and tabs.