Skip to main content

Tabs

Last updated:
8/23/2022

Tabs organize content into sections and allow users to navigate between them.

View in Storybook

Demo tabs

Tab panel 1

Modifiers

Overflow

If there are more tabs than can be shown on the viewport, the tabs will overflow the page. Arrows appear on the far right side of the tab list to allow the user to scroll to see more tabs. Arrows will appear disabled when the user reaches the beginning or end of the tab list.

Demo overflow tabs

Tab panel 1

Usage

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 do not change the user’s URL, the user remains in the same location in the website.

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 is 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 together
  • 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
  • If the total tab content slows the page’s performance

Do:

  • Limit the number of tabs
  • Order tabs logically, such as by order of need or use
  • Group tabs holding related content
  • Consider the experience on small screens

Don't:

  • Add too many tabs — a good rule of thumb is not to add more than six tabs
  • Disable tabs
  • Nest tabs

Content guidelines

Because tabs hide content, tab labels must be as clear as possible.

Do:

  • Keep labels short, clear, and unique
  • Organize labels by way of parallel syntax, wherever possible
  • Ensure that the labels are mutually exclusive from each other
  • Keep translation in mind when writing tab labels
  • Write tab labels in sentence case

Don't:

  • Add long labels, try to keep it to two words

User research

Key takeaways

Tabs must contain parallel content

If tab labels or tab content appear disconnected, users often view them as navigation. If this is the case, re-examine why tabs were used in the first place and explore other solutions.

Only have one row of tabs

Having multiple rows of tabs makes it hard for users to locate where they are in the tab structure. More than one row of tabs is especially confusing on smaller screens. If the content requires multiple rows of tabs, restructure the content or use navigation.

Tabs must not contain content that needs to be compared

If users need to compare info, use accordions or a different content layout. Tabs should not be used if the user would need to switch between tabs while needing to remember and respond to information on both tabs.

No sources

Nielson Norman Group — Tabs, Used Right

Accessibility

This component passes AA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards, usage guidelines, and content guidelines to ensure that this component are fully accessible.

  • Make sure each tab has a unique and descriptive label — this is necessary for users relying on assistive technologies to navigate
  • Make sure that the content within the tab area is also fully accessible

For more information, see WAI-ARIA Authoring Practices for tabs and Deque’s screen reader keyboard shortcuts and gestures documentation.