Skip to main content

Tab

The tabs component lets users navigate between related sections of content, displaying one section at a time.

Do’s​

Tabs can be useful for users to quickly switch between related information if:

  • your content can be usefully separated into sections
  • the first section is more relevant than the others for most users
  • users will not need to view all the sections at once

Don’ts​

Tabs hide content from users and not everyone will notice them or understand how they work. Do not use tabs if your users might need to:

  • read all the content in order, for example, to understand a step-by-step process
  • compare information in different tabs

Having to memorize information and switch between tabs can be frustrating. Test your content without tabs first.

Consider if it is better to:

  • simplify and reduce the amount of content
  • split the content across multiple pages
  • keep the content on a single page, separated by headings
  • use a table of contents to let users navigate quickly to specific sections of content

Tab labels​

  • use short tab labels to appear in a single row. In exceptions, they can use a second line if needed, with a tab max width of 250px. Alternatively, you can use scrollable tabs to allow room for longer titles
  • don’t truncate labels unless required, as truncated text can impede comprehension
  • tab labels should consist of 1 – 2 words: Labels on tabs should clearly describe their function or destination within 2 words at most. Constraining yourself to 1 – 2 words will also help you in thinking more about selecting the best words for your tab labels.