Tabs organize related content into panels and enable visitors to navigate between them. Each panel displays one at a time.
Tabs reduce clutter by forming a unit of related content and fitting more information into a smaller space.
When and how to use it
Use tabs to group similar information on the same page. This allows visitors to switch between content without navigating away from that page or workflow to complete a task.
Use tabs when:
- Content can be logically separated into labeled sections
- Visitors do not need to view all the sections at once
Test your content without tabs first. It might be better to:
- Split the content across multiple pages
- Keep the content on a single page, separated by headings
- Use side navigation to let users navigate quickly to specific sections of content
How not to use it
Do not use the tabs component as a form of page navigation.
Tabs hide content and not everyone will notice them or understand how they work.
Do not use tabs if your visitors need to:
- Read through all of the content in order, like a step-by-step process
- Compare information in different tabs
Standard accessibility review
Each time a new component version is published: