Breadcrumb

A semantic trail of links to the current location.

Interactive preview

Live specimenTry the component

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add breadcrumb

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/docs">Docs</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Components</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`Breadcrumb`	`Native nav attributes`	`aria-label=Breadcrumb`
`BreadcrumbList / BreadcrumbItem`	`Native ol / li attributes`	`—`
`BreadcrumbLink`	`Native anchor attributes`	`—`
`BreadcrumbPage`	`Native span attributes`	`aria-current=page`
`BreadcrumbSeparator`	`Native li attributes`	`decorative chevron`

Accessibility

The nav has a name and an ordered list. Give multiple trails distinct names. BreadcrumbPage marks the current location without becoming an unnecessary link. Separators are hidden from assistive technology and flip in RTL. Links keep native keyboard, modified-click, and browser navigation. Do not put interactive controls inside a decorative separator.