## Breadcrumbs (S—119)

Breadcrumbs that collapse middle levels into a … menu when space runs out, keeping the first and last two visible.

- URL: https://sundaeui.dev/components/breadcrumbs
- Category: Navigation & menus · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/breadcrumbs.json`
- Tags: hierarchy, path, navigation, breadcrumbs, overflow

The trail measures itself: when it would overflow, middle crumbs fold into an ellipsis button that opens a small menu of the hidden levels.
The current page is plain text with aria-current. Long single labels truncate with an ellipsis rather than wrapping.

### Usage

```tsx
import { Breadcrumbs } from '@/components/sundae/breadcrumbs'

<Breadcrumbs />
```

### Props

- `items` (`{ label: string; href: string }[]`, required): Path from root to current.
- `maxVisible` (`number`, default `4`): Crumbs before collapsing.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Deep hierarchies: file systems, docs, admin, e-commerce categories.

### When not to use

- Flat sites with one or two levels.

### Accessibility

- A nav landmark labelled "Breadcrumb" with an ordered list.
- The ellipsis is a menu button labelled "Show 3 more levels".
- Reduced motion removes the movement and keeps every state change.