Components

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Installation

npm install @mijn-ui/react-breadcrumb
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@mijn-ui/react-breadcrumb"
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

API Reference

Breadcrumb is a set of composable parts. Each part forwards its native element attributes (e.g. href, className).

ComponentElementDescription
BreadcrumbnavThe root landmark wrapper.
BreadcrumbListolThe ordered list of breadcrumb items.
BreadcrumbItemliA single item in the list.
BreadcrumbLinkaA navigable link. Accepts asChild to render a custom element (e.g. Link).
BreadcrumbPagespanThe current page (non-interactive, aria-current="page").
BreadcrumbSeparatorliThe visual separator between items. Renders a chevron by default; pass children to override.