Breadcrumb
Shows where the current page sits in the hierarchy and links back to each parent.
npx prodular-ui add breadcrumbDefault
Parents are muted links. The current page is medium weight and not a link.
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,} from "@/components/ui/breadcrumb"
export default function BreadcrumbDefault() { return ( <Breadcrumb> <BreadcrumbList> <BreadcrumbItem> <BreadcrumbLink href="#customers">Customers</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbLink href="#pinecrest">Pinecrest Health</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbPage>Invoice INV-2048</BreadcrumbPage> </BreadcrumbItem> </BreadcrumbList> </Breadcrumb> )}Collapsed with custom separator
Collapse the middle levels with BreadcrumbEllipsis. Pass any icon as the separator.
import { FolderIcon, SlashIcon } from "lucide-react"
import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,} from "@/components/ui/breadcrumb"
export default function BreadcrumbCollapsed() { return ( <Breadcrumb> <BreadcrumbList> <BreadcrumbItem> <BreadcrumbLink href="#workspace"> <FolderIcon /> Halden </BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator> <SlashIcon /> </BreadcrumbSeparator> <BreadcrumbItem> <BreadcrumbEllipsis /> </BreadcrumbItem> <BreadcrumbSeparator> <SlashIcon /> </BreadcrumbSeparator> <BreadcrumbItem> <BreadcrumbLink href="#pipelines">Pipelines</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator> <SlashIcon /> </BreadcrumbSeparator> <BreadcrumbItem> <BreadcrumbPage>Nightly usage export</BreadcrumbPage> </BreadcrumbItem> </BreadcrumbList> </Breadcrumb> )}Anatomy
<Breadcrumb> <BreadcrumbList> <BreadcrumbItem> <BreadcrumbLink href="/customers">Customers</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbPage>Pinecrest Health</BreadcrumbPage> </BreadcrumbItem> </BreadcrumbList></Breadcrumb>Guidance
Use it when
- Pages two or more levels deep: a customer, then an invoice of that customer.
- The top of a detail page, above the title.
Avoid
- Top level pages. The sidebar already says where you are.
- Showing more than four levels. Collapse the middle ones.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- End with BreadcrumbPage for the current page. Never make the last item a link.
- Put a BreadcrumbSeparator between items, not after the last one.
- To use a router link, pass render={<Link href="..." />} to BreadcrumbLink.
- Collapse levels beyond four with BreadcrumbEllipsis, wrapped in a DropdownMenuTrigger if the hidden levels should be reachable.
- Use the same labels as the pages they point to.
API
BreadcrumbLink
| Prop | Type | Default | Description |
|---|---|---|---|
| render | ReactElement | Renders the link as another element, such as a framework Link. |
BreadcrumbSeparator
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Custom separator icon. Defaults to a chevron. |
BreadcrumbPage
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | The current page. Marked with aria-current="page". |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add breadcrumb# or, with the registry in components.jsonnpx shadcn@latest add @prodular/breadcrumb