Breadcrumbs

Use breadcrumbs to show navigational context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages.
  • Alpha
  • Not reviewed for accessibility
This documentation is moving to a new home. Please update any link or bookmark that points to this page. The new content can be found here.
import {Breadcrumbs} from '@primer/react'

Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that:

  • Are many levels deep on a site
  • Do not have a section-level navigation
  • May need the ability to quickly go back to the previous (parent) page

Examples

Props

NameTypeDefaultDescription
children
Breadcrumbs.Item[]
sx
SystemStyleObject
NameTypeDefaultDescription
selected
boolean
false
ref
React.RefObject<HTMLAnchorElement>
as
React.ElementType
"a"

The underlying element to render — either a HTML element name or a React component.

sx
SystemStyleObject
Additional props are passed to the <a> element. See a docs for a list of props accepted by the <a> element.

Status

Alpha

  • Component props and basic example usage of the component are documented on primer.style/react.
  • Component does not have any unnecessary third-party dependencies.
  • Component can adapt to different themes.
  • Component can adapt to different screen sizes.
  • Component has robust unit test coverage (100% where achievable).
  • Component has visual regression coverage of its default and interactive states.
  • Component does not introduce any axe violations.
  • Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.

Beta

  • Component is used in a production application.
  • Common usage examples are documented on primer.style/react.
  • Common usage examples are documented in storybook stories.
  • Component has been reviewed by a systems designer and any resulting issues have been addressed.
  • Component does not introduce any performance regressions.

Stable

  • Component API has been stable with no breaking changes for at least one month.
  • Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
  • Component has corresponding design guidelines documented in the interface guidelines.
  • Component has corresponding Figma component in the Primer Web library.
  • Tooling (such as linters, codemods, etc.) exists to prevent further use of alternatives.