Navigation
Bottom navigation
A navigation bar for iOS and Android with native badges.
Anatomy
No interactive example yet. The anatomy for this component lives in the Figma file; the tables below describe it.
States
DefaultActiveBadge
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Bar | Fixed to the bottom, 375 to 412px | Required |
| 2 | Item | 20px icon, 11px label | Required |
| 3 | Active blob | Indigo at 10% opacity | Required |
| 4 | Badge | Count with name | Optional |
Specifications
| Icon | 20 × 20px |
|---|---|
| Label | 11px Manrope Medium |
| Item padding | 8px horizontal · 7px vertical |
| Active | Indigo blob at 10% opacity |
| Viewports | 375 · 390 · 412px |
Interaction
| Key | Result |
|---|---|
| Tab | Each item |
| Enter | Follows the link |
| Trigger | Response |
|---|---|
| Tap | Active blob grows, haptic if available |
Accessibility
role · navigation
1.3.1Info and Relationships2.5.8Target Size (Minimum)4.1.2Name, Role, Value
| Requirement | How Rig meets it |
|---|---|
| Landmark | <nav aria-label="Main">, with 3 to 5 items |
| Labels | Always show the text label |
| Current | aria-current="page" |
| Safe area | Respect the device inset so the bar never sits under the home indicator |
Usage
| Do | Don’t |
|---|---|
| Limit to five destinations | Do not hide labels to save space |