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>
pnpm dlx shadcn@latest add @dotui/breadcrumbs
Use breadcrumbs to display a hierarchy of links showing the user's location in a site or application.
import { Breadcrumb, Breadcrumbs } from "@/components/ui/breadcrumbs";
Use the controls below to experiment with different breadcrumbs props and see the live preview and code update.
isDisabled
boolean
—
children
ReactNode | function
items
Iterable<T>
dependencies
readonly any[]
A Breadcrumb represents an individual item in a Breadcrumbs list.
id
Key
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.
<Dynamic(Breadcrumbs)> <Dynamic(Breadcrumb) href="#">Home</Dynamic(Breadcrumb)> <Dynamic(Breadcrumb) href="#">Components</Dynamic(Breadcrumb)> <Dynamic(Breadcrumb) href="#">Breadcrumbs</Dynamic(Breadcrumb)> </Dynamic(Breadcrumbs)>