Breadcrumbs

Breadcrumbs display the current page or context within the site, allowing them to navigate different levels of the hierarchy.

Page navigation navigation

React

readyNot reviewed for a11y

Storybook|Source

Rails

readyNot reviewed for a11y

Docs|Lookbook|Source

Figma

View in Figma|

Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site's hierarchy. Breadcrumbs show and link to pages higher up in the ancestry.

React examples

Default

<Breadcrumbs>
  <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
  <Breadcrumbs.Item href="#">About</Breadcrumbs.Item>
  <Breadcrumbs.Item href="#" selected>
    Team
  </Breadcrumbs.Item>
</Breadcrumbs>

<Breadcrumbs>
  <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
  <Breadcrumbs.Item href="#">About</Breadcrumbs.Item>
  <Breadcrumbs.Item href="#" selected>
    Team
  </Breadcrumbs.Item>
</Breadcrumbs>

Props

Name	Default	Description
className		`string`
children		`Breadcrumbs.Item[]`
sx		`SystemStyleObject`

Name	Default	Description
selected	`false`	`boolean` Whether this item represents the current page
to		`string \| Partial<Path>` Used when the item is rendered using a component like React Router's `Link`. The path to navigate to.
ref		`React.RefObject<HTMLAnchorElement>`
as	`"a"`	`React.ElementType`
sx		`SystemStyleObject`

See a for more prop options