Navigation
Breadcrumb
Breadcrumb trails with mono slash separators and an ellipsis.
Breadcrumbs show where a page sits in the site hierarchy and give one-click routes back up. Pair the component with BreadcrumbList JSON-LD (this site does) and Google shows the same trail in search results.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/breadcrumb.jsonThe CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/breadcrumb.
Usage
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem><BreadcrumbPage>Docs</BreadcrumbPage></BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>API reference
BreadcrumbLink
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Use your router's Link. |
BreadcrumbSeparator
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "/" | Custom separator. |
Breadcrumb · BreadcrumbList · BreadcrumbItem · BreadcrumbPage · BreadcrumbEllipsis
Accessibility
- A <nav aria-label="Breadcrumb"> with an ordered list.
- The current page has aria-current="page".
FAQ
Also searched as: react breadcrumb · shadcn breadcrumb · breadcrumb navigation · breadcrumb seo · nextjs breadcrumbs