# Breadcrumb

Shows where the current page sits and lets people step back up.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/breadcrumb
```

## Usage

```tsx
import { Breadcrumb } from '@/components/fetaui/breadcrumb'

export function Example() {
  return (
    <Breadcrumb
      items={[
        { label: 'Projects', href: '/projects' },
        { label: 'FetaUI', href: '/projects/fetaui' },
        { label: 'Components' },
      ]}
    />
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| items | BreadcrumbItem[] | required |
| appearance | plain, tray | plain |
| size | sm, md | md |
| separator | chevron, slash, dot | chevron |
| loading | boolean | false |
| maxItems | number | 4 |
| aria-label | string | Breadcrumb |
| animated | boolean | true |

## When to use

- On pages two or more levels deep.
- Plain in page headers, Tray for standalone navigation.
- Show at most four crumbs and fold the middle beyond that.

## When not to use

- On top level pages.
- To repeat the page title as a link.

## Accessibility

- A nav labelled Breadcrumb around an ordered list.
- The current page has aria-current page.
- Separators are decorative and hidden from screen readers.

## Motion

- A new level slides in 8 px over 200 ms.
- Going up, removed crumbs fade and slide out in 150 ms.
- In Tray, the current chip glides to its spot.
- The fold menu grows from its button.
- While loading, a skeleton holds the place of the current page.
- With reduced motion, the chip jumps and the skeleton stays still.