Loading...
Loading...
> Displays the path to the current resource using a hierarchy of links.
1import {2 Breadcrumb,3 BreadcrumbList,4 BreadcrumbItem,5 BreadcrumbLink,6 BreadcrumbPage,7 BreadcrumbSeparator,8} from "@/components/ui/breadcrumb"
1import {2 Breadcrumb,3 BreadcrumbList,4 BreadcrumbItem,5 BreadcrumbLink,6 BreadcrumbPage,7 BreadcrumbSeparator,8} from "@/components/ui/breadcrumb";910<Breadcrumb>11 <BreadcrumbList>12 <BreadcrumbItem>13 <BreadcrumbLink href="/">Home</BreadcrumbLink>14 </BreadcrumbItem>15 <BreadcrumbSeparator />16 <BreadcrumbItem>17 <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>18 </BreadcrumbItem>19 <BreadcrumbSeparator />20 <BreadcrumbItem>21 <BreadcrumbPage>Breadcrumb</BreadcrumbPage>22 </BreadcrumbItem>23 </BreadcrumbList>24</Breadcrumb>
1import { Slash } from "lucide-react";23<Breadcrumb>4 <BreadcrumbList>5 <BreadcrumbItem>6 <BreadcrumbLink href="/">Home</BreadcrumbLink>7 </BreadcrumbItem>8 <BreadcrumbSeparator>9 <Slash />10 </BreadcrumbSeparator>11 <BreadcrumbItem>12 <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>13 </BreadcrumbItem>14 <BreadcrumbSeparator>15 <Slash />16 </BreadcrumbSeparator>17 <BreadcrumbItem>18 <BreadcrumbPage>Components</BreadcrumbPage>19 </BreadcrumbItem>20 </BreadcrumbList>21</Breadcrumb>
1import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb";23<Breadcrumb>4 <BreadcrumbList>5 <BreadcrumbItem>6 <BreadcrumbLink href="/">Home</BreadcrumbLink>7 </BreadcrumbItem>8 <BreadcrumbSeparator />9 <BreadcrumbItem>10 <BreadcrumbEllipsis />11 </BreadcrumbItem>12 <BreadcrumbSeparator />13 <BreadcrumbItem>14 <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>15 </BreadcrumbItem>16 <BreadcrumbSeparator />17 <BreadcrumbItem>18 <BreadcrumbPage>Breadcrumb</BreadcrumbPage>19 </BreadcrumbItem>20 </BreadcrumbList>21</Breadcrumb>
1import {2 DropdownMenu,3 DropdownMenuContent,4 DropdownMenuItem,5 DropdownMenuTrigger,6} from "@/components/ui/dropdown-menu";78<Breadcrumb>9 <BreadcrumbList>10 <BreadcrumbItem>11 <BreadcrumbLink href="/">Home</BreadcrumbLink>12 </BreadcrumbItem>13 <BreadcrumbSeparator />14 <BreadcrumbItem>15 <DropdownMenu>16 <DropdownMenuTrigger className="flex items-center gap-1">17 <BreadcrumbEllipsis className="h-4 w-4" />18 </DropdownMenuTrigger>19 <DropdownMenuContent align="start">20 <DropdownMenuItem className="font-semibold">21 Documentation22 </DropdownMenuItem>23 <DropdownMenuItem className="font-semibold">24 Guides25 </DropdownMenuItem>26 <DropdownMenuItem className="font-semibold">27 Components28 </DropdownMenuItem>29 </DropdownMenuContent>30 </DropdownMenu>31 </BreadcrumbItem>32 <BreadcrumbSeparator />33 <BreadcrumbItem>34 <BreadcrumbPage>Breadcrumb</BreadcrumbPage>35 </BreadcrumbItem>36 </BreadcrumbList>37</Breadcrumb>
1import Link from "next/link";23<Breadcrumb>4 <BreadcrumbList>5 <BreadcrumbItem>6 <BreadcrumbLink asChild>7 <Link href="/">Home</Link>8 </BreadcrumbLink>9 </BreadcrumbItem>10 <BreadcrumbSeparator />11 <BreadcrumbItem>12 <BreadcrumbLink asChild>13 <Link href="/docs">Documentation</Link>14 </BreadcrumbLink>15 </BreadcrumbItem>16 <BreadcrumbSeparator />17 <BreadcrumbItem>18 <BreadcrumbPage>Current Page</BreadcrumbPage>19 </BreadcrumbItem>20 </BreadcrumbList>21</Breadcrumb>
| Prop | Type | Default | Description |
|---|---|---|---|
| separator | React.ReactNode | - | Custom separator to use between breadcrumb items on the Breadcrumb root |
| asChild | boolean | false | For BreadcrumbLink - when true, merges props into the child element (useful for Next.js Link) |
✓ Use Breadcrumb when:
✗ Don't use when:
Best Practices: