Breadcrumb

1import Link from "next/link"
2 
3import {
4  Example,
5  ExampleWrapper,
6} from "@/registry/radix-sera/components/example"
7import {
8  Breadcrumb,
9  BreadcrumbEllipsis,
10  BreadcrumbItem,
11  BreadcrumbLink,
12  BreadcrumbList,
13  BreadcrumbPage,
14  BreadcrumbSeparator,
15} from "@/registry/radix-sera/ui/breadcrumb"
16import { Button } from "@/registry/radix-sera/ui/button"
17import {
18  DropdownMenu,
19  DropdownMenuContent,
20  DropdownMenuItem,
21  DropdownMenuTrigger,
22} from "@/registry/radix-sera/ui/dropdown-menu"
23 
24export default function BreadcrumbExample() {
25  return (
26    <ExampleWrapper>
27      <BreadcrumbBasic />
28      <BreadcrumbWithDropdown />
29      <BreadcrumbWithLink />
30    </ExampleWrapper>
31  )
32}
33 
34function BreadcrumbBasic() {
35  return (
36    <Example title="Basic" className="items-center justify-center">
37      <Breadcrumb>
38        <BreadcrumbList>
39          <BreadcrumbItem>
40            <BreadcrumbLink href="#">Home</BreadcrumbLink>
41          </BreadcrumbItem>
42          <BreadcrumbSeparator />
43          <BreadcrumbItem>
44            <BreadcrumbLink href="#">Components</BreadcrumbLink>
45          </BreadcrumbItem>
46          <BreadcrumbSeparator />
47          <BreadcrumbItem>
48            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
49          </BreadcrumbItem>
50        </BreadcrumbList>
51      </Breadcrumb>
52    </Example>
53  )
54}
55 
56function BreadcrumbWithDropdown() {
57  return (
58    <Example title="With Dropdown" className="items-center justify-center">
59      <Breadcrumb>
60        <BreadcrumbList>
61          <BreadcrumbItem>
62            <BreadcrumbLink href="#">Home</BreadcrumbLink>
63          </BreadcrumbItem>
64          <BreadcrumbSeparator />
65          <BreadcrumbItem>
66            <DropdownMenu>
67              <DropdownMenuTrigger asChild>
68                <Button size="icon-sm" variant="ghost">
69                  <BreadcrumbEllipsis />
70                  <span className="sr-only">Toggle menu</span>
71                </Button>
72              </DropdownMenuTrigger>
73              <DropdownMenuContent align="start">
74                <DropdownMenuItem>Documentation</DropdownMenuItem>
75                <DropdownMenuItem>Themes</DropdownMenuItem>
76                <DropdownMenuItem>GitHub</DropdownMenuItem>
77              </DropdownMenuContent>
78            </DropdownMenu>
79          </BreadcrumbItem>
80          <BreadcrumbSeparator />
81          <BreadcrumbItem>
82            <BreadcrumbLink href="#">Components</BreadcrumbLink>
83          </BreadcrumbItem>
84          <BreadcrumbSeparator />
85// … truncated