Components
Loading preview...
Breadcrumbs display a hierarchy of links to the current page or resource in an application. Breadcrumbs provide a list of links to parent pages of the current page in hierarchical order. Breadcrumbs helps implement these in an accessible way.
@jolbol1
npx shadcn@latest add https://21st.dev/r/jolbol1/breadcrumbsimport {
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
Breadcrumbs,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumbs"
function BreadcrumbsDemo() {
return (
<Breadcrumbs>
<BreadcrumbItem>
<BreadcrumbLink href="/home">Home</BreadcrumbLink>
<BreadcrumbSeparator />
</BreadcrumbItem>
<BreadcrumbItem>
<BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
<BreadcrumbSeparator />
</BreadcrumbItem>
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumbs</BreadcrumbPage>
</BreadcrumbItem>
</Breadcrumbs>
)
}
export { BreadcrumbsDemo }