# Breadcrumb trail (goodtabs UI)

Breadcrumbs that fold the middle levels into an ellipsis menu when the trail is long.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/breadcrumb-trail.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/breadcrumb-trail`

## Usage

```tsx
import { BreadcrumbTrail } from "@/components/ui/breadcrumb-trail"

<BreadcrumbTrail
  items={[
    { label: "Home", href: "/" },
    { label: "Projects", href: "/projects" },
    { label: "Northwind" },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `{ label: string; href?: string }[]` |  | The trail from the root to the current page, in order. The last item is the page. |
| maxItems | `number` | `4` | Above this many items the middle collapses into a menu. Minimum 2. |
| separator | `ReactNode` | `<ChevronRightIcon />` | Between items. Defaults to the breadcrumb primitive's chevron. |
| moreLabel | `string` | `"Show hidden pages"` | Accessible name of the ellipsis button. |

## When to use

- At the top of a page that sits three or more levels deep
- In docs, settings and file browsers where the path is the context
- When long trails must stay on one line without losing the hidden levels

## When not to use

- On a page one level below home: a single back link is enough
- As the main navigation; it shows where you are, not where you can go
- For tabs or steps in a flow, which are not a hierarchy

## Notes for agents

- Server component on the breadcrumb and dropdown-menu primitives; links are next/link, so pass real hrefs
- With more than maxItems the first item and the last maxItems minus 2 stay visible; the rest go in the menu
- The last item renders as BreadcrumbPage with aria-current, whether or not it has an href
- A hidden level without an href shows as a disabled menu item

Docs: https://ui.goodtabs.co/components/breadcrumb-trail