Breadcrumb

1import Link from 'next/link'
2
3import {
4    DropdownMenu,
5    DropdownMenuContent,
6    DropdownMenuItem,
7    DropdownMenuTrigger,
8} from '@/components/ui/dropdown-menu'
9import {
10    Breadcrumb,
11    BreadcrumbEllipsis,
12    BreadcrumbItem,
13    BreadcrumbLink,
14    BreadcrumbList,
15    BreadcrumbPage,
16    BreadcrumbSeparator,
17} from '@/components/ui/breadcrumb'
18
19export function BreadcrumbDemo() {
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 hover:text-primary">
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}
56

1import Link from 'next/link'
2import { Component, Home } from 'lucide-react'
3
4import {
5    Breadcrumb,
6    BreadcrumbItem,
7    BreadcrumbLink,
8    BreadcrumbList,
9    BreadcrumbPage,
10    BreadcrumbSeparator,
11} from '@/components/ui/breadcrumb'
12
13export function BreadcrumbLinks() {
14    return (
15        <Breadcrumb>
16            <BreadcrumbList>
17                <BreadcrumbItem>
18                    <BreadcrumbLink asChild>
19                        <Link href="/">
20                            <Home /> Home
21                        </Link>
22                    </BreadcrumbLink>
23                </BreadcrumbItem>
24                <BreadcrumbSeparator />
25                <BreadcrumbItem>
26                    <BreadcrumbLink asChild>
27                        <Link href="/components"><Component />Components</Link>
28                    </BreadcrumbLink>
29                </BreadcrumbItem>
30                <BreadcrumbSeparator />
31                <BreadcrumbItem>
32                    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
33                </BreadcrumbItem>
34            </BreadcrumbList>
35        </Breadcrumb>
36    )
37}
38