# Breadcrumb

> Where this page sits: a trail of links ending on the current page, folding its middle into a menu when long.

Category: Navigation. Docs page: https://rime.mjsons.net/components/breadcrumb

## Installation

```bash
npx shadcn@latest add KezLahd/rime/breadcrumb
```

Breadcrumb is a nav landmark holding an ordered list of links. The last item is the current page: not a link, marked aria-current="page", in heading ink. Items may carry an icon (a home glyph on the first).

Past maxItems (default 4) the middle folds into an ellipsis Menu: the first item, the menu, then the last items, so the trail stays on one line. separator swaps the chevron for any node, "/" being the common alternative.

## Usage

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

<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "Projects", href: "/projects" },
    { label: "Website relaunch" },
  ]}
/>
```

## Props: Breadcrumb

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `ReadonlyArray<BreadcrumbItem>` |  |  |
| `maxItems` | `number` | `4` | Past this many items the middle folds into an ellipsis menu: the first item, the menu, then the last (maxItems - 2). Default 4. |
| `separator` | `ReactNode` |  | Between items. Defaults to a small chevron; "/" is the other common choice. |
| `aria-label` | `string` |  |  |
| `className` | `string` |  |  |

## Examples

### Default

```tsx
<Breadcrumb items={[{ label: "Home", href: "/", icon: <IconHome size={14} /> }, { label: "Projects", href: "/projects" }, { label: "Website relaunch" }]} />
```

### Long trail, folded

Six items with maxItems={4}: the middle three sit in the ellipsis menu.

```tsx
<Breadcrumb maxItems={4} items={TRAIL} />
```

### Slash separator

```tsx
<Breadcrumb separator="/" items={[{ label: "Settings", href: "/settings" }, { label: "Team", href: "/settings/team" }, { label: "Members" }]} />
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--breadcrumb-gap` | `6px` |
| `--breadcrumb-size` | `var(--text-small)` |

System tokens it reads: `--dur`, `--ease`, `--focus-ring`, `--ink-brand`, `--ink-disabled`, `--ink-heading`, `--ink-muted`, `--r-xs`, `--text-small`, `--wash-subtle`.

## Accessibility

- A <nav aria-label="Breadcrumb"> wrapping an <ol>, so the count and order are announced.
- The current page is aria-current="page" and not a link; separators are hidden from assistive tech.
- The ellipsis is a Menu button named "Show n more" with keyboard support of its own.

## Do

- Start from the section root, not from the site name, when the shell already shows the site.

## Don't

- Don't use a breadcrumb as the only navigation.
- Don't link the current page to itself.

Related: https://rime.mjsons.net/components/navigation-menu, https://rime.mjsons.net/components/page-header