Breadcrumbs

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

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={IconZap}>
    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>

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>

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>