Navigation
Navbar
Primary navigation across a platform: sidebar, collapsed rail and nav items.
Anatomy
No interactive example yet. The anatomy for this component lives in the Figma file; the tables below describe it.
States
DefaultHoveredActiveDisabled
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Container | Sidebar, desktop and collapsed widths | Required |
| 2 | Brand | Logo link to home | Required |
| 3 | Nav items | Links with icon and label | Required |
| 4 | Collapse control | Button with aria-expanded | Optional |
Specifications
| Layout | Sidebar with desktop and collapsed widths |
|---|---|
| Tokens | Native CSS variables |
Interaction
| Key | Result |
|---|---|
| Tab | Each link in order |
| Enter | Follows the link |
| Skip link | First tab stop jumps past the navigation |
| Trigger | Response |
|---|---|
| Hover | Item tint |
| Collapse | Width animates in 300ms; labels become tooltips |
Accessibility
role · navigation
1.3.1Info and Relationships2.4.1Bypass Blocks2.4.7Focus Visible4.1.2Name, Role, Value
| Requirement | How Rig meets it |
|---|---|
| Landmark | <nav aria-label="Main"> |
| Current | aria-current="page" on the active link |
| Collapsed | Icons keep their text as aria-label and tooltip |
| Skip link | A visible-on-focus link to main content (WCAG 2.4.1) |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| Keep the order stable across pages | Do not use role=menu for site navigation |
| Do not rely on icons alone |