Breadcrumbs

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


Usage

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 can be rendered using primary color for the clickable items:

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

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.

Using with router

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

Custom components

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

Every item can contain custom components instead of regular link:

Accessibility

  • It's recommended to pass attributes.ariaLabel to Breadcrumbs to provide more context around the role of the breadcrumbs on the page
Previous
Next