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 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="hover:text-primary 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}
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">
28                            <Component />
29                            Components
30                        </Link>
31                    </BreadcrumbLink>
32                </BreadcrumbItem>
33                <BreadcrumbSeparator />
34                <BreadcrumbItem>
35                    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
36                </BreadcrumbItem>
37            </BreadcrumbList>
38        </Breadcrumb>
39    )
40}
41