Breadcrumb
Displays the path to the current page as a trail of links. Swappable separators and an ellipsis for collapsed segments, in two sizes.
Playground
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="#">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Preview
Compose BreadcrumbItems inside a BreadcrumbList, separated by BreadcrumbSeparator, and end with a BreadcrumbPage for the current location.
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="#">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Installation
npx shadcn@latest add https://espresso-base-ui.vercel.app/r/breadcrumb.jsonUsage
import {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Sizes
size="md" bumps the trail to larger, medium-weight text with bigger separators and a larger ellipsis (28px with a 20px icon, vs 24px with a 16px icon); the default sm is compact.
<Breadcrumb size="md">
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="#">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Custom separator
BreadcrumbSeparator renders a chevron by default – pass children to swap in any icon or text glyph.
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<ArrowRight />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbLink href="#">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>/</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Collapsed with ellipsis
Replace middle segments of a long trail with BreadcrumbEllipsis – it can also serve as a dropdown trigger to reveal the hidden pages.
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbEllipsis />
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="#">Profile</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Edit</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>With a routing link
BreadcrumbLink renders an a by default; use the render prop to compose it with your router's link component.
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink render={<Link href="/ui" />}>UI</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>API reference
Breadcrumb is a compound component: the root takes the size prop and shares it via a data attribute, so the list, links, page and separators all resize together. Every part accepts className plus the standard props of its element.
Breadcrumb
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "sm" | Trail scale – sm is compact text with 12px separators and a 24px ellipsis; md uses larger medium-weight text, 16px separators and a 28px ellipsis. |
| Component | Description |
|---|---|
| BreadcrumbList | Ordered list (<ol>) that lays the trail out with wrapping (data-slot="breadcrumb-list"). |
| BreadcrumbItem | List item wrapper for a link, page or ellipsis (data-slot="breadcrumb-item"). |
| BreadcrumbLink | Interactive segment with hover, focus-visible and active styles (data-slot="breadcrumb-link"). Renders an <a>; use render to swap in a router link. |
| BreadcrumbPage | Non-interactive current page (data-slot="breadcrumb-page"). Marked role="link", aria-disabled and aria-current="page". |
| BreadcrumbSeparator | Divider between items (data-slot="breadcrumb-separator"). Chevron by default, any children accepted; aria-hidden presentation. |
| BreadcrumbEllipsis | Three-dot placeholder for collapsed segments with an sr-only "More" label (data-slot="breadcrumb-ellipsis"). 24px with a 16px icon in sm, 28px with a 20px icon in md. aria-hidden presentation. |
Accessibility & styling hooks
The root renders a nav with aria-label="breadcrumb", so assistive tech announces it as a navigation landmark. BreadcrumbPage carries aria-current="page" and aria-disabled, while separators and the ellipsis are hidden from the accessibility tree with role="presentation" and aria-hidden. Every part exposes a data-slot attribute and the root reflects its size as data-size – target these from CSS for app-level overrides.