---
title: Breadcrumb
description: A navigation trail from the root to the current page.
group: Components
order: 17
---
Show where the current page sits in the site. Add separators between levels and collapse the middle when the path gets long.
```tsx
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
export function Example() {
return (
Docs
Components
Breadcrumb
)
}
```
## Installation
```bash
npx @arctis-sh/@arctis-sh/ui@latest add breadcrumb
```
## Usage
```tsx
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
```
```tsx
Docs
Components
Breadcrumb
```
## Composition
```tree
Breadcrumb
└── BreadcrumbList
├── BreadcrumbItem
│ └── BreadcrumbLink
├── BreadcrumbSeparator
├── BreadcrumbItem
│ └── BreadcrumbLink
├── BreadcrumbSeparator
└── BreadcrumbItem
└── BreadcrumbPage
```
`BreadcrumbList` holds the ordered trail. Each `BreadcrumbItem` contains either a `BreadcrumbLink` or the current `BreadcrumbPage`, with `BreadcrumbSeparator` between items.
## Basic
A root, section, and current page with the default chevron separators.
```tsx
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
export function Example() {
return (
Docs
Components
Breadcrumb
)
}
```
## Custom separator
Pass children to `BreadcrumbSeparator` to replace the chevron with a slash, dot, or another mark.
```tsx
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
export function Example() {
return (
Docs
Components
Breadcrumb
)
}
```
## Collapsed
Replace middle levels with `BreadcrumbEllipsis` when the full trail is too long.
```tsx
import {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
export function Example() {
return (
Docs
Components
Breadcrumb
)
}
```
## Dropdown
Put the ellipsis in a dropdown to keep hidden levels within easy reach.
```tsx
import {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
export function Example() {
return (
Docs
Installation
Theming
Installation
Components
Breadcrumb
)
}
```
## Icon
Place an icon or logo in any crumb, usually the first. Add `aria-label` when it has no visible text.
```tsx
import { Logo } from "@/components/brand/logo"
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
export function Example() {
return (
Components
Breadcrumb
)
}
```
## Link component
Set `asChild` on `BreadcrumbLink` and pass your router's `Link` component for client-side navigation.
```tsx
import Link from "next/link"
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
export function Example() {
return (
Docs
Components
Breadcrumb
)
}
```
## API Reference
### Breadcrumb
| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |
```tsx
Home
Docs
```
### BreadcrumbList
| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |
```tsx
...
```
### BreadcrumbItem
| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |
```tsx
Home
```
### BreadcrumbLink
| Prop | Type | Default |
| --- | --- | --- |
| asChild | boolean | false |
| href | string | — |
| className | string | — |
```tsx
Home
```
### BreadcrumbPage
| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |
```tsx
Docs
```
### BreadcrumbSeparator
| Prop | Type | Default |
| --- | --- | --- |
| children | ReactNode | chevron |
| className | string | — |
```tsx
```
### BreadcrumbEllipsis
| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |
```tsx
```
## Source
```tsx
import {
cloneElement,
isValidElement,
type ComponentProps,
type ReactElement,
type ReactNode,
} from "react";
import { cn } from "@/lib/utils";
type BreadcrumbProps = ComponentProps<"nav">;
export function Breadcrumb({ className, ...props }: BreadcrumbProps) {
return (
);
}
type BreadcrumbListProps = ComponentProps<"ol">;
export function BreadcrumbList({ className, ...props }: BreadcrumbListProps) {
return (
);
}
type BreadcrumbItemProps = ComponentProps<"li">;
export function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps) {
return (
);
}
type BreadcrumbLinkProps = ComponentProps<"a"> & {
asChild?: boolean;
};
export function BreadcrumbLink({
asChild = false,
className,
children,
...props
}: BreadcrumbLinkProps) {
const classes = cn(
"inline-flex items-center gap-1.5 transition-colors duration-200 ease-out hover:text-foreground [&>svg]:h-3 [&>svg]:w-auto [&>svg]:shrink-0",
className,
);
if (asChild && isValidElement(children)) {
const child = children as ReactElement<{ className?: string }>;
return cloneElement(child, {
className: cn(classes, child.props.className),
...props,
});
}
return (
{children}
);
}
type BreadcrumbPageProps = ComponentProps<"span">;
export function BreadcrumbPage({ className, ...props }: BreadcrumbPageProps) {
return (
svg]:h-3 [&>svg]:w-auto [&>svg]:shrink-0",
className,
)}
{...props}
/>
);
}
function ChevronRightIcon() {
return (
);
}
type BreadcrumbSeparatorProps = ComponentProps<"li"> & {
children?: ReactNode;
};
export function BreadcrumbSeparator({
children,
className,
...props
}: BreadcrumbSeparatorProps) {
return (
svg]:size-3.5", className)}
{...props}
>
{children ?? }
);
}
function MoreHorizontalIcon() {
return (
);
}
type BreadcrumbEllipsisProps = ComponentProps<"span">;
export function BreadcrumbEllipsis({
className,
...props
}: BreadcrumbEllipsisProps) {
return (
More
);
}
```