Breadcrumbs display a hierarchy of links to the current page or resource in an application.
<Breadcrumbs>
<Breadcrumb href="#">Home</Breadcrumb>
<Breadcrumb href="#">Components</Breadcrumb>
<Breadcrumb href="#">Breadcrumbs</Breadcrumb>
</Breadcrumbs>npx shadcn@latest add @dotui/breadcrumbsUse breadcrumbs to display a hierarchy of links showing the user's location in a site or application.
import { Breadcrumb, Breadcrumbs } from "@/components/ui/breadcrumbs";<Breadcrumbs>
<Breadcrumb href="#">Home</Breadcrumb>
<Breadcrumb href="#">Components</Breadcrumb>
<Breadcrumb href="#">Breadcrumbs</Breadcrumb>
</Breadcrumbs>Use the controls below to experiment with different breadcrumbs props and see the live preview and code update.
<Breadcrumbs>
<Breadcrumb href="#">Home</Breadcrumb>
<Breadcrumb href="#">Components</Breadcrumb>
<Breadcrumb href="#">Breadcrumbs</Breadcrumb>
</Breadcrumbs>Breadcrumbs display a hierarchy of links to the current page or resource in an application.
| Prop | Type | Default | |
|---|---|---|---|
boolean | — | ||
ReactNode | function | — | ||
Iterable<T> | — | ||
readonly any[] | — | ||
A Breadcrumb represents an individual item in a Breadcrumbs list.
| Prop | Type | Default | |
|---|---|---|---|
Key | — | ||
ReactNode | function | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.