Navigation
Tabs
Switch between views in the same context, with seven semantic styles.
Examples
Account health, usage and recent activity.
Reach, engagement and growth by platform.
Assets waiting for review and approval.
States
| Default | Hover | Focus visible | Pressed | Disabled | |
|---|---|---|---|---|---|
| Inactive | |||||
| Active |
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Tab list | Row of tabs with an underline | Required |
| 2 | Tab | Button with role=tab | Required |
| 3 | Panel | Content with role=tabpanel | Required |
| 4 | Indicator | Active underline slides | Required |
Specifications
| Styles | Seven pre-configured semantic styles |
|---|
Interaction
| Key | Result |
|---|---|
| Tab | Moves into the tab list on the active tab, then to the panel |
| ← → | Moves focus between tabs (and selects, with automatic activation) |
| Home End | First / last tab |
| Delete | Optional: closes a closable tab |
| Trigger | Response |
|---|---|
| Click | Selects, indicator slides in 200ms |
| Hover | Text brightens |
Accessibility
role · tablist
1.3.1Info and Relationships2.1.1Keyboard4.1.2Name, Role, Value
| Requirement | How Rig meets it |
|---|---|
| Roles | tablist, tab, tabpanel with aria-controls and aria-labelledby |
| Roving tabindex | Only the active tab has tabindex="0" |
| Selected | aria-selected, not colour alone |
| Disabled | aria-disabled; remains reachable only if it needs explaining |
| Panel | tabindex="0" when it has no focusable content |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| Use for views of the same content | Do not use tabs for navigation between pages |
| Keep labels to one or two words | Do not use more than 6 tabs |