Breadcrumbs

Breadcrumbs provide a list of links to parent pages of the current page in hierarchical order. Breadcrumbs helps implement these in an accessible way.

npx shadcn@latest add https://backchanel.com/default/breadcrumbs

Client Side Routing

The <BreadcrumbItem> component works with frameworks and client side routers like Next.js, Remix and React Router. As with other React Aria components that support links, this works via the RouterProvider component at the root of your app. See the client side routing guide to learn how to set this up.

Landmark

When breadcrumbs are used as a main navigation element for a page, they can be placed in a navigation landmark. Landmarks help assistive technology users quickly find major sections of a page.

<nav aria-label="Breadcrumbs">
  <Breadcrumbs>
    <BreadcrumbItem>
      <BreadcrumbLink href="/home">Home</BreadcrumbLink>
      <BreadcrumbSeparator />
    </BreadcrumbItem>
    ...
  </Breadcrumbs>
</nav>

It is best to keep the number of landmarks on a page to a minimum, so only place breadcrumbs in a navigation landmark when it represents the primary or secondary navigation for the page. For example, breadcrumbs within table rows or popovers most likely should not be landmarks.

Usage

Basic

Custom Separator

To use a custom separator simply place the component as a child of <BreadcrumbSeparator>.

Make sure the separators are within <BreadcrumbItem>.

Disabled

You can disable all breadcrumb items by using the isDisabled prop on the <Breadcrumbs> component.

Individual breadcrumbs can also be disabled by passing the isDisabled prop to the <BreadcrumbLink>.

Dropdown

If the navigation is too large, you could compose a <BreadcrumbItem> with a dropdown. You can do this by utilizing the Menu Component.

Collapsed

Use <BreadcrumbEllipsis /> component to show collapsed state if the breadcrumb is too long.

You could also combine this with a dropdown menu to show the collapsed links.

Dynamic Items

Breadcrumbs follows the Collection Components API, accepting both static and dynamic collections. Dynamic collections, as shown below, can be used when the options come from an external data source such as an API call, or update over time.

As seen below, an iterable list of options is passed to the Breadcrumbs using the items prop. A function provided as children of the <Breadcrumbs> is called to render each item. When a breadcrumb is pressed, the onAction event is triggered and the breadcrumbs array is updated

More information can be found on the react-aria documentation.