Tabs
Tabs let users easily move through related sections of content, showing one section at a time.
On this page
How to use tabs
Tabs are a useful way of letting users quickly switch between related information.
When using tabs:
- Only one option can be selected at a time
- Once an option is selected, the results should display immediately
- The first tab should be the most relevant to users
- They should only be used for related information
- Users should be able to complete tasks under each tab without having to jump back and forth between tabs
Types of tabs
Tabs come in two types; primary and secondary. Which one you use depends the context you use it in.
Primary
Use by default, especially for the main or only tab on the page.
Tab 1 content
Tab 2 content
Tab 3 content
Secondary
Only use if primary tabs are already used on the page.
Tab 1 content
Tab 2 content
Tab 3 content
Content guidelines
Use clear tab labels so that it’s obvious what content will be displayed when customers select a tab.
Use concise tab labels, try to keep them to one or two words.
Start your tab labels with a capital letter.
Don’t use commas or any punctuation at the end of each label.