Breadcrumb

1import Link from "next/link";
2 
3import {
4  Breadcrumb,
5  BreadcrumbEllipsis,
6  BreadcrumbItem,
7  BreadcrumbLink,
8  BreadcrumbList,
9  BreadcrumbPage,
10  BreadcrumbSeparator
11} from "@/components/ui/breadcrumb";
12import {
13  DropdownMenu,
14  DropdownMenuContent,
15  DropdownMenuItem,
16  DropdownMenuTrigger
17} from "@/components/ui/dropdown-menu";
18 
19export default function BreadcrumbWithDropdown() {
20  return (
21    <Breadcrumb>
22      <BreadcrumbList>
23        <BreadcrumbItem>
24          <BreadcrumbLink asChild>
25            <Link href="/">Home</Link>
26          </BreadcrumbLink>
27        </BreadcrumbItem>
28        <BreadcrumbSeparator />
29        <BreadcrumbItem>
30          <DropdownMenu>
31            <DropdownMenuTrigger className="flex items-center gap-1">
32              <BreadcrumbEllipsis className="size-4" />
33              <span className="sr-only">Toggle menu</span>
34            </DropdownMenuTrigger>
35            <DropdownMenuContent align="start">
36              <DropdownMenuItem>Documentation</DropdownMenuItem>
37              <DropdownMenuItem>Themes</DropdownMenuItem>
38              <DropdownMenuItem>GitHub</DropdownMenuItem>
39            </DropdownMenuContent>
40          </DropdownMenu>
41        </BreadcrumbItem>
42        <BreadcrumbSeparator />
43        <BreadcrumbItem>
44          <BreadcrumbLink asChild>
45            <Link href="/docs/components">Components</Link>
46          </BreadcrumbLink>
47        </BreadcrumbItem>
48        <BreadcrumbSeparator />
49        <BreadcrumbItem>
50          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
51        </BreadcrumbItem>
52      </BreadcrumbList>
53    </Breadcrumb>
54  );
55}