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

Use disableExpand boolean property to remove the collapsed items interaction. It can be useful when you render breadcrumbs in other clickable elements and can't render nested button elements.

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