# Breadcrumb
Shows the user's current location within a site hierarchy and provides navigation links to parent pages.
> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).
Home
Components
Breadcrumb
Home
Components
Breadcrumb
Home
Components
Breadcrumb
Home
Components
Breadcrumb
## With Ellipsis [#with-ellipsis]
Use `BreadcrumbEllipsis` to collapse middle items on deep paths.
Home
Components
Breadcrumb
## Custom Separator [#custom-separator]
Pass any ReactNode to `BreadcrumbSeparator` as a child to replace the default chevron.
Home
Components
Breadcrumb
## As Link (Router) [#as-link-router]
Use `asChild` on `BreadcrumbLink` to pass a framework router link (e.g. Next.js `Link`).
```tsx
import Link from "next/link";
Components
```
## Props [#props]
### Breadcrumb [#breadcrumb]
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | ---------------------- |
| `className` | `string` | — | Additional CSS classes |
### BreadcrumbList [#breadcrumblist]
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | ---------------------- |
| `className` | `string` | — | Additional CSS classes |
### BreadcrumbItem [#breadcrumbitem]
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | ---------------------- |
| `className` | `string` | — | Additional CSS classes |
### BreadcrumbLink [#breadcrumblink]
| Prop | Type | Default | Description |
| ----------- | --------- | ------- | -------------------------------------------- |
| `asChild` | `boolean` | `false` | Render as child element (e.g. router `Link`) |
| `href` | `string` | — | Link destination |
| `className` | `string` | — | Additional CSS classes |
### BreadcrumbPage [#breadcrumbpage]
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | ---------------------- |
| `className` | `string` | — | Additional CSS classes |
### BreadcrumbSeparator [#breadcrumbseparator]
| Prop | Type | Default | Description |
| ----------- | ----------- | ------------------ | ---------------------- |
| `children` | `ReactNode` | `` | Custom separator icon |
| `className` | `string` | — | Additional CSS classes |
### BreadcrumbEllipsis [#breadcrumbellipsis]
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | ---------------------- |
| `className` | `string` | — | Additional CSS classes |
## Usage [#usage]
```tsx
import {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
// Basic
HomeDocsCurrent Page
// With ellipsis for deep paths
HomeCurrent Page
```
## Specs [#specs]
```md
# Mint — Breadcrumb Specs
## Component
- name: breadcrumb
- file: registry/mint/breadcrumb.tsx
- installs to: components/ui/breadcrumb.tsx
- dependencies: radix-ui, lucide-react
## What is it
A navigation trail showing the user's current location within the site hierarchy.
Use it on pages that sit 2+ levels deep — it allows users to jump back to any
ancestor without pressing Back. Always end the trail with BreadcrumbPage (the
current item), never a link.
## Visual identity
Minimal and inline. Muted foreground text for links, full foreground for the
current page. ChevronRight (size-3.5) as the default separator — clean and
directional. No borders, no background — the trail disappears into the layout.
## Design tokens
--muted-foreground: oklch(0.52 0.06 155) — link text
--foreground: oklch(0.145 0 0) — current page text
## Dark theme
--muted-foreground: oklch(0.6 0.06 155)
--foreground: oklch(0.985 0 0)
## Anatomy
←