Components · Data
Breadcrumb
An accessible breadcrumb trail: a labelled nav wrapping an ordered list, with decorative chevron separators hidden from the accessibility tree and the current page marked with aria-current.
Live in all three modes
Day · Night-NVG · Mono: one component, re-themed through the token layer.
Variants & states
- link item
- current item (aria-current)
- decorative separator
Tokens used
--semantic-color-text-muted--semantic-color-action-primary--semantic-color-action-primary-hover--semantic-color-text-primary
Copy-paste
import { Breadcrumb, BreadcrumbItem } from 'operator-components';
<Breadcrumb>
<BreadcrumbItem href="/ops">Operations</BreadcrumbItem>
<BreadcrumbItem href="/ops/sectors">Sectors</BreadcrumbItem>
<BreadcrumbItem current>Sector 7</BreadcrumbItem>
</Breadcrumb>Figma: library link coming soon. Gated until it's on sole-owned footing. (TODO: replace with the Community/library URL once published.)