Navigation
Sidebar
Grouped navigation with section headers and collapse carets.
Anatomy
No interactive example yet. The anatomy for this component lives in the Figma file; the tables below describe it.
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Group header | Manrope Bold with a caret | Required |
| 2 | Item | Link, hover and selected tokens | Required |
| 3 | Divider | Systemic palette token | Optional |
Specifications
| Group header | Manrope Bold with trailing caret |
|---|---|
| Items | Hovered and selected values tokenised |
Interaction
| Key | Result |
|---|---|
| Tab | Each link and group toggle |
| Enter Space | Opens a group or follows a link |
| Trigger | Response |
|---|---|
| Hover | Tint |
| Group toggle | Caret rotates, height animates |
Accessibility
role · navigation
1.3.1Info and Relationships2.4.7Focus Visible4.1.2Name, Role, Value
| Requirement | How Rig meets it |
|---|---|
| Groups | Disclosure buttons with aria-expanded and aria-controls |
| Current | aria-current="page" |
| Headings | Use text labels, not heading levels, for group names so the page outline stays clean |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| Group by task | Do not nest more than two levels |