# Breadcrumb

- Page: <https://kznlabs.github.io/labsUI/components/breadcrumb>

## Breadcrumb (`breadcrumb`, component)

Navigation trail from a list of items: links up to the current page, which is marked for assistive tech. Server-safe, custom separator.

- Install: `npx @kznlabs/labsui add breadcrumb`
- Docs: <https://kznlabs.github.io/labsUI/components/breadcrumb>
- npm: lucide-react@1.63.0

### API

- `<Breadcrumb>` (+ <nav> props): Where the page sits in the site: a list of links ending at the current page. Server-safe.
  - `items: Crumb[]`: The trail, outermost first. The last item is the current page.
  - `separator?: ReactNode`: Drawn between items. Default a chevron.

- `type Crumb = { label: ReactNode; href?: string; onClick?: MouseEventHandler<HTMLAnchorElement>; }`

### Usage

```tsx
<Breadcrumb items={[{ label: "Home", href: "/" }, { label: "Components" }]} />
```

### Example: nav-trail.tsx

```tsx
import { Breadcrumb } from "@/components/ui/breadcrumb";

export function NavTrail({ post }: { post: { title: string } }) {
  return (
    <Breadcrumb
      items={[
        { label: "Home", href: "/" },
        { label: "Blog", href: "/blog" },
        { label: post.title },
      ]}
    />
  );
}
```