Search
Copy Code
Previous: Tabs
Next: Pagination
Close Terminal
Light Mode
breadcrumb-demo.tsx
breadcrumb.tsx
Collapse
Reset
Copy Code
Download
Run
1
"use client"
2
3
import {
4
Breadcrumb,
5
BreadcrumbEllipsis,
6
BreadcrumbItem,
7
BreadcrumbLink,
8
BreadcrumbList,
9
BreadcrumbPage,
10
BreadcrumbSeparator,
11
} from "@/components/ui/breadcrumb"
12
import {
13
DropdownMenu,
14
DropdownMenuContent,
15
DropdownMenuItem,
16
DropdownMenuTrigger,
17
} from "@/components/ui/dropdown-menu"
18
19
export default function BreadcrumbDemo() {
20
return (
21
<div className="w-full min-h-[400px] flex items-center justify-center p-8">
22
<Breadcrumb>
23
<BreadcrumbList>
24
<BreadcrumbItem>
25
<BreadcrumbLink href="#">Home</BreadcrumbLink>
26
</BreadcrumbItem>
27
<BreadcrumbSeparator />
28
<BreadcrumbItem>
29
<DropdownMenu>
30
<DropdownMenuTrigger className="flex items-center gap-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 rounded-full">
31
<BreadcrumbEllipsis className="h-6 w-8" />
32
<span className="sr-only">Toggle menu</span>
33
</DropdownMenuTrigger>
34
<DropdownMenuContent align="start" className="w-[180px]">
35
<DropdownMenuItem>Documentation</DropdownMenuItem>
36
<DropdownMenuItem>Themes</DropdownMenuItem>
37
<DropdownMenuItem>GitHub</DropdownMenuItem>
38
</DropdownMenuContent>
39
</DropdownMenu>
40
</BreadcrumbItem>
41
<BreadcrumbSeparator />
42
<BreadcrumbItem>
43
<BreadcrumbLink href="#">Components</BreadcrumbLink>
44
</BreadcrumbItem>
45
<BreadcrumbSeparator />
46
<BreadcrumbItem>
47
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
48
</BreadcrumbItem>
49
</BreadcrumbList>
50
</Breadcrumb>
51
</div>
52
)
53
}