# Breadcrumb
Breadcrumb is a neobrutalist React component from Cruise UI. Where a page sits in the site; the middle collapses into "…" on phones.
Install (with the @cruiseui registry in components.json, see Installation):
```bash
npx shadcn@latest add @cruiseui/breadcrumb
```
Import: `import { CruiseBreadcrumb } from "@/components/cruise/breadcrumb";`
## When to use
Deep sites (shops, docs, settings) where people step back up.
## When not to
Sites one or two levels deep.
## Example (React)
```tsx
import { CruiseBreadcrumb } from "@/components/cruise/breadcrumb";
export default function BreadcrumbExample() {
return (
);
}
```
## HTML
Needs theme.css (https://cruiseui.dev/theme.css).
```html
```
## Props: CruiseBreadcrumb
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `CruiseCrumb[]` | — | — |
| `separator?` | `"slash" \| "chevron"` | `"chevron"` | — |
| `popupClassName?` | `string` | — | Extra classes on the "…" menu, e.g. "nepa-mode" (it renders in ). |
| `className?` | `string` | — | — |
## Accessibility
-