Tabs organise content into distinct, switchable views within the same context. They help reduce page length and visual clutter by allowing users to access only the content they are interested in, without navigating away or scrolling past sections. The component works best when the content within each tab belongs to a shared theme, and when users are likely to want to switch between views.
Do's
- use short, relevant tab labels that make clear what content is contained
- order tabs logically, whether sequentially (i.e. by date or stage) or to reflect the most common user journey
- ensure the default active tab reflects the content most users are likely to need first
Don'ts
- do not hide information in tabs that should always be visible - if content is critical to understanding the page, it should be in the main body
- do not use tabs when the content within each panel is so different that users might mistake them for site-level navigation rather than in-page views
When to use
- use when the content within each tab is related
- use when users may benefit from switching between different views
- use when reducing page length improves the overall reading and scanning experience
When not to use
- do not use when the tab panels contain substantially different content or topics that lack shared context
- do not use as a substitute for site navigation or section-level way-finding; instead, use the Menu or Navigation List