# Breadcrumb
`Breadcrumb` shows the user's current location as a trail of links back through
the site hierarchy, so they can jump up the path without using the browser back
button.
## Usage
```tsx
import { Breadcrumb } from '@takeoff-ui/react-spar';
```
```tsx
```
## Playground
```tsx
HomeFlightsIstanbul → London
```
```css
.breadcrumb-demo-stack {
display: grid;
gap: 12px;
}
.breadcrumb-demo-note {
width: fit-content;
border: 1px solid var(--border-light);
border-radius: 999px;
background: var(--static-light);
color: var(--text-dark);
font-size: 13px;
font-weight: 600;
line-height: 1;
padding: 8px 12px;
}
```
## Size
```tsx
HomeAccountHomeAccount
```
```css
.breadcrumb-demo-stack {
display: grid;
gap: 12px;
}
.breadcrumb-demo-note {
width: fit-content;
border: 1px solid var(--border-light);
border-radius: 999px;
background: var(--static-light);
color: var(--text-dark);
font-size: 13px;
font-weight: 600;
line-height: 1;
padding: 8px 12px;
}
```
## Variant
`type="outlined"` wraps each crumb in a bordered, backgrounded chip;
`type="basic"` (the default) is the bare text trail. A label-less (icon-only)
chip opts into tighter padding with the `tk-breadcrumb-item-icon-only` class —
`` — since the
compound API has no label prop to auto-detect it.
```tsx
HomeFlightsIstanbul → LondonHomeFlightsIstanbul → London
```
```css
.breadcrumb-demo-stack {
display: grid;
gap: 12px;
}
.breadcrumb-demo-note {
width: fit-content;
border: 1px solid var(--border-light);
border-radius: 999px;
background: var(--static-light);
color: var(--text-dark);
font-size: 13px;
font-weight: 600;
line-height: 1;
padding: 8px 12px;
}
```
## Separators
`Breadcrumb.Separator` defaults to a chevron. The `variant` prop switches to the
dot, slash, or vertical glyph presets:
```tsx
HomeAccountHomeAccountHomeAccount
```
```css
.breadcrumb-demo-stack {
display: grid;
gap: 12px;
}
.breadcrumb-demo-note {
width: fit-content;
border: 1px solid var(--border-light);
border-radius: 999px;
background: var(--static-light);
color: var(--text-dark);
font-size: 13px;
font-weight: 600;
line-height: 1;
padding: 8px 12px;
}
```
Arbitrary content goes through `children`, which overrides the preset:
```tsx
HomeLoyaltyStatus & miles
```
```css
.breadcrumb-demo-stack {
display: grid;
gap: 12px;
}
.breadcrumb-demo-note {
width: fit-content;
border: 1px solid var(--border-light);
border-radius: 999px;
background: var(--static-light);
color: var(--text-dark);
font-size: 13px;
font-weight: 600;
line-height: 1;
padding: 8px 12px;
}
```
## Icons
Compose an icon before the label inside `Breadcrumb.Link` or `Breadcrumb.Page` —
the recipe sizes direct `svg`/`img` children and tones them with the crumb's
text color:
```tsx
Home
FlightsIstanbul → London
Notifications
Team inbox
All updates
```
```css
.breadcrumb-demo-stack {
display: grid;
gap: 12px;
}
.breadcrumb-demo-note {
width: fit-content;
border: 1px solid var(--border-light);
border-radius: 999px;
background: var(--static-light);
color: var(--text-dark);
font-size: 13px;
font-weight: 600;
line-height: 1;
padding: 8px 12px;
}
```
## External Link
```tsx
Home
Help center
Refunds
```
```css
.breadcrumb-demo-stack {
display: grid;
gap: 12px;
}
.breadcrumb-demo-note {
width: fit-content;
border: 1px solid var(--border-light);
border-radius: 999px;
background: var(--static-light);
color: var(--text-dark);
font-size: 13px;
font-weight: 600;
line-height: 1;
padding: 8px 12px;
}
```
## Routing Integration
`onNavigate` runs for every `Breadcrumb.Link` activation (click,
Enter, or Space). Spar prevents the native navigation
before invoking it, so hand the destination straight to your client-side router
— no `event.preventDefault()` needed. A link-level `onPress` takes priority and
short-circuits `onNavigate` when both are set.
```tsx
function NavigateBreadcrumbDemo() {
const [last, setLast] = useState(null);
const handleNavigate = (href) => {
setLast(href);
};
return (
{last ? 'Navigate to ' + last : 'Click a link to intercept routing'}
HomeBookingPassenger details
);
}
render();
```
```css
.breadcrumb-demo-stack {
display: grid;
gap: 12px;
}
.breadcrumb-demo-note {
width: fit-content;
border: 1px solid var(--border-light);
border-radius: 999px;
background: var(--static-light);
color: var(--text-dark);
font-size: 13px;
font-weight: 600;
line-height: 1;
padding: 8px 12px;
}
```
### Custom link components
Every part is polymorphic via `as`, so a router's link component can replace the
anchor directly — no `onNavigate` interception needed:
```tsx
Flights
```
`Breadcrumb.Item` also accepts a render function receiving
`{ position, isCurrent, isDisabled }` for state-driven content:
```tsx
{({ isDisabled }) => }
```
## Disabled
Setting `disabled` on the root cascades to every `Breadcrumb.Link`: it removes
the anchor's `href`, sets `aria-disabled` on both the `