NAVIGATION / COMPONENTS
Tabs
Switch between related views.
About tabs
Tabs are interactive UI components designed to organize and display content in a segmented manner, allowing users to easily navigate between multiple views or sections without leaving the current page. They provide a streamlined user experience by grouping related content together, making it accessible with a single click.
Anatomy
Shared parts, named consistently.
A shared vocabulary for your product.
- 1Tab contentRequired
The text label or optional SVG inside the tab.
- 2Divider
Creates visual separation in-between adjacent tabs.
- 3Selected highlight
Visual cue to denote the currently selected tab.
Try the default
A working example with the shared V1 visual language.
A shared vocabulary for your product.
When to use
Use for peer views within the same context. Keep labels short and avoid hiding steps that must be completed in sequence.
Arrow keys move between tabs and activate immediately. Home/End move to the first/last tab. Tab enters the active panel.