Breadcrumb
Hierarchical path navigation showing the user's location in the site.
Variants
Two separator styles cover every context. Choose chevron when the path feels more navigational.
| Variant | Purpose |
|---|---|
| Slash | Default separator. Clean, space-efficient, suits most catalog and content pages. |
| Chevron | Use in data-dense or nav-heavy contexts where direction reinforces hierarchy. |
Design tokens
| Token | Value | Description |
|---|---|---|
text/primary | #3b3b3d | Current page label |
text/brand | #226558 | Parent link text (default + focus) |
text/brand/hover | #15483e | Link hover state (darkens, underlined) |
text/tertiary | #aeaeae | Separator colour |
typography/body/sm | 14px / 20px | Breadcrumb text size |