# Breadcrumbs

> Navigation trail.

Source: https://ui.jcsoftdev.com/docs/components/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

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

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

## Usage

```tsx
<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](/storybook/?path=/story/navigation-breadcrumbs--default)

## Source

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