Breadcrumbs

Import
import { Breadcrumbs } from "reshaped";
import type { BreadcrumbsProps } from "reshaped";
Related components
Custom item and separator rendering
Supports item collapsing


Breadcrumbs render all of the Breadcrumbs.Item passed to it and separates them with chevron icons. Breadcrumbs.Item that has no onClick or href passed to it is rendered as an active item which represents the current page.

<Breadcrumbs>
  <Breadcrumbs.Item onClick={() => {}}>Catalog</Breadcrumbs.Item>
  <Breadcrumbs.Item onClick={() => {}}>Shoes</Breadcrumbs.Item>
  <Breadcrumbs.Item onClick={() => {}}>Running</Breadcrumbs.Item>
  <Breadcrumbs.Item>Ultraboost</Breadcrumbs.Item>
</Breadcrumbs>

Breadcrumbs can be rendered using primary color for the clickable items:

<Breadcrumbs color="primary">
  <Breadcrumbs.Item onClick={() => {}}>Catalog</Breadcrumbs.Item>
  <Breadcrumbs.Item onClick={() => {}}>Shoes</Breadcrumbs.Item>
  <Breadcrumbs.Item onClick={() => {}}>Running</Breadcrumbs.Item>
  <Breadcrumbs.Item>Ultraboost</Breadcrumbs.Item>
</Breadcrumbs>

Every item supports rendering an icon and its user interaction can be disabled:

<Breadcrumbs color="primary">
  <Breadcrumbs.Item onClick={() => {}} icon={IconZap}>
    Catalog
  </Breadcrumbs.Item>
  <Breadcrumbs.Item disabled>Shoes</Breadcrumbs.Item>
  <Breadcrumbs.Item onClick={() => {}}>Running</Breadcrumbs.Item>
  <Breadcrumbs.Item>Ultraboost</Breadcrumbs.Item>
</Breadcrumbs>

In case Breadcrumbs have too many items displayed, you can collapse certain amount of them using defaultVisibleItems property. For example, showing 3 visible items will show the first and the last two items in the list with an expand button in between. Clicking on thab button will expand all the items back to the default state.

<Breadcrumbs defaultVisibleItems={2}>
  <Breadcrumbs.Item onClick={() => {}}>Catalog</Breadcrumbs.Item>
  <Breadcrumbs.Item onClick={() => {}}>Shoes</Breadcrumbs.Item>
  <Breadcrumbs.Item onClick={() => {}}>Running</Breadcrumbs.Item>
  <Breadcrumbs.Item>Ultraboost</Breadcrumbs.Item>
</Breadcrumbs>

You can use Breadcrumbs.Item together with all popular router solutions by wrapping them in the used router Link component:

<Breadcrumbs>
  <RouterLink href="/">
    <Breadcrumbs.Item>Catalog</Breadcrumbs.Item>
  </RouterLink>
  <RouterLink href="/shoes">
    <Breadcrumbs.Item>Shoes</Breadcrumbs.Item>
  </RouterLink>
  <RouterLink href="/shoes/running">
    <Breadcrumbs.Item>Running</Breadcrumbs.Item>
  </RouterLink>
  <Breadcrumbs.Item>Ultraboost</Breadcrumbs.Item>
</Breadcrumbs>

Separator icon can be replaced with a custom element. For example, you can use / or - text elements:

<Breadcrumbs separator="/">
  <Breadcrumbs.Item onClick={() => {}}>Catalog</Breadcrumbs.Item>
  <Breadcrumbs.Item onClick={() => {}}>Shoes</Breadcrumbs.Item>
  <Breadcrumbs.Item onClick={() => {}}>Running</Breadcrumbs.Item>
  <Breadcrumbs.Item>Ultraboost</Breadcrumbs.Item>
</Breadcrumbs>

Every item can contain custom components instead of regular link:

<Breadcrumbs>
  <Breadcrumbs.Item onClick={() => {}}>
    <Badge>Catalog</Badge>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item onClick={() => {}}>
    <Badge>Shoes</Badge>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item onClick={() => {}}>
    <Badge>Running</Badge>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>Ultraboost</Breadcrumbs.Item>
</Breadcrumbs>
  • It's recommended to pass attributes.ariaLabel to Breadcrumbs to provide more context around the role of the breadcrumbs on the page