Breadcrumbs
Use breadcrumbs to enable wayfinding through navigational links
Primer Design System
Site navigation
On this page
On this page
import {Breadcrumbs} from '@primer/react-brand'
Examples
Default
Accent
Accessibility
Ensure that the text of each individual Breadcrumb item fits entirely within a 320px wide viewport. Failure to do this violates WCAG 1.4.10 Reflow.
Do
Use short Breadcrumb item names to ensure they fit within a 320px wide viewport.
Don’t
Don't allow Breadcrumb item names to overflow the 320px wide viewport, as this violates WCAG 1.4.10 Reflow.
Component props
Breadcrumbs Required
| name | type | default | required | description |
|---|---|---|---|---|
variant | 'default''accent' | false | Specify alternative breadcrumb appearance |
Breadcrumbs.Item Required
| name | type | default | required | description |
|---|---|---|---|---|
selected | boolean | false | Used for indicating the active link | |
href | string | true | URL of the page the link goes to |