Navigation
Breadcrumb
A path to the current page, with link states.
Examples
States
DefaultHoveredCurrent
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Container | nav landmark | Required |
| 2 | Links | Ancestors as links | Required |
| 3 | Separator | Decorative chevron | Required |
| 4 | Current page | Plain text, not a link | Required |
Specifications
| Type | Body size tuned for scanning paths |
|---|
Interaction
| Key | Result |
|---|---|
| Tab | Each link |
| Enter | Follows the link |
| Trigger | Response |
|---|---|
| Hover | Underline |
| Click | Navigates |
Accessibility
role · navigation
1.3.1Info and Relationships2.4.8Location4.1.2Name, Role, Value
| Requirement | How Rig meets it |
|---|---|
| Landmark | <nav aria-label="Breadcrumb"> with an ordered list |
| Current | aria-current="page" on the last item |
| Separators | Added with CSS or aria-hidden icons so they are not read |
| Truncation | Collapse the middle on narrow screens, keep a way to expand |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| Show the path, not the history | Do not use as the only navigation |