Skip to main content
The @zendeskgarden/react-breadcrumbs package provides an accessible Breadcrumb component that renders a <nav> landmark with chevron-separated links. The last item is automatically marked as the current page via aria-current="page".

​
Installation

npm install @zendeskgarden/react-breadcrumbs

# Peer dependencies
npm install react react-dom styled-components @zendeskgarden/react-theming
Place a ThemeProvider from @zendeskgarden/react-theming at the root of your React application. All Garden components must be rendered inside a ThemeProvider.

​
Usage

​
Basic breadcrumb

Pass any React nodes as children. The Breadcrumb component inserts chevron separators between items and applies aria-current="page" to the last child automatically. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Breadcrumb } from '@zendeskgarden/react-breadcrumbs';
import { Anchor } from '@zendeskgarden/react-buttons';

const Example = () => (
  <ThemeProvider>
    <Breadcrumb>
      <Anchor href="/">Root</Anchor>
      <Anchor href="/section">Section</Anchor>
      <span>Current page</span>
    </Breadcrumb>
  </ThemeProvider>
);
Use Anchor from @zendeskgarden/react-buttons for the navigable items. The last item does not need to be a link — a plain <span> works well for the current page.

​
Deep hierarchy

const Example = () => (
  <ThemeProvider>
    <Breadcrumb>
      <Anchor href="/">Home</Anchor>
      <Anchor href="/support">Support</Anchor>
      <Anchor href="/support/tickets">Tickets</Anchor>
      <span>Ticket #12345</span>
    </Breadcrumb>
  </ThemeProvider>
);

​
Breadcrumb

The Breadcrumb component renders a <nav> element with an ordered list of items separated by chevron icons. It uses @zendeskgarden/container-breadcrumb internally for accessibility logic.

​
Accessibility

  • Renders as a <nav> landmark with aria-label="Breadcrumbs" by default.
  • The last child automatically receives aria-current="page".
  • Chevron separators are hidden from assistive technology.

​
Props

​
aria-label
string
default:"Breadcrumbs"
Accessible label for the <nav> landmark. Override this with a localized string when targeting non-English users.
All other standard HTMLAttributes<HTMLElement> props are forwarded to the <nav> element.

​
Exports

The following are exported from @zendeskgarden/react-breadcrumbs:
ExportDescription
BreadcrumbBreadcrumb navigation container

Build docs developers (and LLMs) love

Get started for freeTalk to us