Breadcrumbs

Top-level product navigation that helps user understand the location of the current page and navigate back to its parents.

Import

import { Breadcrumbs } from "reshaped";
import type { BreadcrumbsProps } from "reshaped";

Related components

Link

Tabs

Storybook

Breadcrumbs stories

Usage

Breadcrumbs render all Breadcrumbs.Item elements passed to them and separate them with chevron icons. A Breadcrumbs.Item with no onClick or href passed to it is rendered as an active item representing 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 the primary color for 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={ActivityIcon}>
    Catalog
  </Breadcrumbs.Item>
  <Breadcrumbs.Item disabled>Shoes</Breadcrumbs.Item>
  <Breadcrumbs.Item onClick={() => {}}>Running</Breadcrumbs.Item>
  <Breadcrumbs.Item>Ultraboost</Breadcrumbs.Item>
</Breadcrumbs>

If Breadcrumbs have too many items displayed, you can collapse a certain number of them using the defaultVisibleItems property. For example, setting it to 3 will show the first item and the last two items in the list, with an expand button in between. Clicking on that 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>

Use the disableExpand boolean property to remove interaction with collapsed items. This can be useful when rendering breadcrumbs inside other clickable elements where nested buttons cannot be used.

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

Using with router

You can use Breadcrumbs.Item with all popular router solutions by wrapping them in the router's 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>

Composition

The 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 a 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>

Accessibility

It's recommended to pass attributes.ariaLabel to Breadcrumbs to provide more context about their role on the page.

Badge

Button