Breadcrumb
Displays the hierarchical path to the current page, helping users understand their location and navigate back to parent pages.
Code
Installation
npx shadcn@latest add breadcrumbBasic Example
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/components">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>With Next.js Link
import Link from "next/link"
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="/components">
Components
</Link>
</BreadcrumbLink>
</BreadcrumbItem>With Ellipsis
import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb"
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbEllipsis />
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Use with custom link components (e.g., Next.js Link) to merge props |
| ...props | HTMLAttributes | — | All standard HTML attributes |
Basic Breadcrumb
With Ellipsis
Long Navigation Path
Usage Guidelines
When to Use
Use breadcrumbs to show the hierarchical path to the current page, helping users understand their location within a site or application. They are particularly useful for navigation structures with three or more levels.
Breadcrumbs work well in e-commerce sites, content management systems, file browsers, and any application with deep hierarchical navigation.
Consider using breadcrumbs when users need to understand their location or quickly navigate to parent pages without disrupting their current workflow.
Best Practices
- Always end with the current page using BreadcrumbPage
- Use BreadcrumbLink for all parent navigation items
- Keep breadcrumb paths concise (3-5 levels recommended)
- Use BreadcrumbEllipsis when the path is too long
- Ensure clear visual hierarchy between links and current page
- Consider mobile truncation for long breadcrumb trails
- Use the ellipsis component when intermediate levels are omitted
Accessibility
Breadcrumbs should always be wrapped in a nav element with aria-label="breadcrumb" for screen reader recognition. The current page should have aria-current="page" to indicate it is the active page.
Ensure separators have appropriate ARIA attributes (role="presentation" and aria-hidden="true") to avoid confusing screen readers. Use meaningful link text that makes sense out of context.
The component structure uses semantic HTML elements (nav, ol, li) which provide inherent accessibility benefits. Keyboard navigation should follow the expected order of the breadcrumb trail.