# Breadcrumb

Navigation trail with the current page in full ink and earlier levels muted. New levels rise into place, going back fades crumbs away, and a collapsed “…” opens to show hidden levels.

> Composed · Free · Navigation — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add breadcrumb
```

## Import

```tsx
import { BreadcrumbRoot, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbEllipsis, Breadcrumb } from "@/components/ui/breadcrumb/breadcrumb";
```

## Variants

- `collapsed` — Collapsed: `npx @lumioui/cli add breadcrumb-collapsed`
- `trail` — Full trail: `npx @lumioui/cli add breadcrumb-trail`

## Props

### Breadcrumb

| Prop | Type | Notes |
| --- | --- | --- |
| `items?` | `BreadcrumbItemData[]` | Data-driven trail — last item renders as the current page. |
| `maxItems?` | `number` | Collapse middle items into a "…" button when the trail exceeds this. Default none. |
| `onEllipsisPress?` | `(hidden: BreadcrumbItemData[]) => void` | Fired when the "…" button is pressed, after the trail expands. |
| `haptic?` | `"selection" | "light" | false` | Haptic on crumb taps. Default "selection". |
| `children?` | `React.ReactNode` | Compound composition: <Breadcrumb.Item> children, separators auto-inserted. |
| `className?` | `string` | — |

### BreadcrumbItem

| Prop | Type | Notes |
| --- | --- | --- |
| `current?` | `boolean` | Current page — non-interactive, lit in ink. |
| `onPress?` | `() => void` | — |
| `accessibilityLabel?` | `string` | — |
| `children?` | `React.ReactNode` | — |
| `className?` | `string` | — |

### BreadcrumbSeparator

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |

### BreadcrumbEllipsis

| Prop | Type | Notes |
| --- | --- | --- |
| `onPress?` | `() => void` | — |
| `className?` | `string` | — |

## Icons rendered

- `chevron-right` — /icons.html?i=chevron-right
- `more-horizontal` — /icons.html?i=more-horizontal

Source: https://lumioui.com/components/breadcrumb