Tabs

Horizontal tabs allow users to alternate between content that falls under the same topic.

Use tabs if it’s important for users to stay in the same place while alternating content and they don’t need to see the same content at the same time.

Do not use tabs if people need to compare the information behind the tabs.

Each page should have no more than one tab set that has four or less sections. This helps prevent multiple-line scrolling.

Tips for tabs:

• Write clear labels. Tab labels should be one to two words and use plain language.
• Limit labels to four words or less. This allows users to quickly process the type of information within the tab.
• Content between tabs should be parallel. Tabs should not substitute for site navigation.
• Stick to one row of labels. Be sure to check how it will display in mobile, too.

Tip: Tabs turn into accordions on mobile.

How to add tabs

Tabs Example