Breadcrumb

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