import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink render={<a href="/" />}>Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink render={<a href="/components" />}>
Components
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
Use the following composition to build a Breadcrumb:
Breadcrumb
└── BreadcrumbList
├── BreadcrumbItem
│ └── BreadcrumbLink
├── BreadcrumbSeparator
├── BreadcrumbItem
│ └── BreadcrumbLink
├── BreadcrumbSeparator
└── BreadcrumbItem
└── BreadcrumbPage
A basic breadcrumb with a home link and a components link.
Use a custom component as children for <BreadcrumbSeparator /> to create a custom separator.
You can compose <BreadcrumbItem /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.
We provide a <BreadcrumbEllipsis /> component to show a collapsed state when the breadcrumb is too long.
To use a custom link component from your routing library, you can use the render prop on <BreadcrumbLink />.
To enable RTL support, see the RTL configuration guide.
The Breadcrumb component is the root navigation element that wraps all breadcrumb components.
The BreadcrumbList component displays the ordered list of breadcrumb items.
The BreadcrumbItem component wraps individual breadcrumb items.
The BreadcrumbLink component displays a clickable link in the breadcrumb.
The BreadcrumbPage component displays the current page in the breadcrumb (non-clickable).
The BreadcrumbSeparator component displays a separator between breadcrumb items. You can pass custom children to override the default separator icon.
The BreadcrumbEllipsis component displays an ellipsis indicator for collapsed breadcrumb items.