Breadcrumb
Displays the path to the current resource using a hierarchy of links.
Last updated January 1, 1980
CreditsModifiedPublished
Copied from shadcn/ui.
- The default separator icon and its RTL mirroring now flip automatically based on the ambient text direction
Overview
Installation
Usage
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
export function Example() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/components">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
)
}Examples
Custom separator
Pass children to BreadcrumbSeparator to use a custom separator.
Dropdown
Compose BreadcrumbItem with DropdownMenu to create a dropdown in the breadcrumb.
Collapsed
Use BreadcrumbEllipsis to show a collapsed state when the breadcrumb is too long.
Link component
Use the render prop on BreadcrumbLink to use a custom link component from your routing library.
RTL
Province & city
A Persian navigation pattern pairing well with City Selector: country, province, and city as breadcrumb levels.
API Reference
BreadcrumbLink
API reference: shadcn/ui BreadcrumbLink .