Breadcrumbs

Navigation trail. A nav landmark (named “Breadcrumbs” in the active locale unless aria-label is set) around an ordered list; the last item is the current page and carries aria-current="page" instead of a link.

Import

import { Breadcrumbs } from "@jcsoftdev/ui/navigation";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/navigation/breadcrumbs.

Usage

<Breadcrumbs
  items={[
      { label: "Home", href: "#home" },
      { label: "Customers", href: "#customers" },
      { label: "Marco Salazar" },
    ]}
/>

Props

Prop	Type	Default	Description
items *	readonly BreadcrumbItem[]		Trail in order; the last entry is the current page.
renderLink	BreadcrumbRenderLink	defaultRenderLink	Link renderer; defaults to a plain anchor.
classNames	Partial<Record<BreadcrumbsPart, string>>		Per-part classes merged with cn; consumer classes win. className still targets the root and is merged last.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default

Source

packages/ui/src/navigation/breadcrumbs/breadcrumbs.tsx