breadcrumb

1import { cn } from "@/lib/utils"
2import { Slot } from "@radix-ui/react-slot"
3import { ChevronRight, MoreHorizontal } from "lucide-react"
4import * as React from "react"
5 
6function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
7  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
8}
9 
10function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
11  return (
12    <ol
13      data-slot="breadcrumb-list"
14      className={cn(
15        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
16        className,
17      )}
18      {...props}
19    />
20  )
21}
22 
23function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
24  return (
25    <li
26      data-slot="breadcrumb-item"
27      className={cn("inline-flex items-center gap-1.5", className)}
28      {...props}
29    />
30  )
31}
32 
33function BreadcrumbLink({
34  asChild,
35  className,
36  ...props
37}: React.ComponentProps<"a"> & {
38  asChild?: boolean
39}) {
40  const Comp = asChild ? Slot : "a"
41 
42  return (
43    <Comp
44      data-slot="breadcrumb-link"
45      className={cn("hover:text-foreground transition-colors", className)}
46      {...props}
47    />
48  )
49}
50 
51function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
52  return (
53    <span
54      data-slot="breadcrumb-page"
55      role="link"
56      aria-disabled="true"
57      aria-current="page"
58      className={cn("text-foreground font-normal", className)}
59      {...props}
60    />
61  )
62}
63 
64function BreadcrumbSeparator({
65  children,
66  className,
67  ...props
68}: React.ComponentProps<"li">) {
69  return (
70    <li
71      data-slot="breadcrumb-separator"
72      role="presentation"
73      aria-hidden="true"
74      className={cn("[&>svg]:size-3.5", className)}
75      {...props}
76    >
77      {children ?? <ChevronRight />}
78    </li>
79  )
80}
81 
82function BreadcrumbEllipsis({
83  className,
84  ...props
85}: React.ComponentProps<"span">) {
86  return (
87    <span
88      data-slot="breadcrumb-ellipsis"
89      role="presentation"
90      aria-hidden="true"
91      className={cn("flex size-9 items-center justify-center", className)}
92      {...props}
93    >
94      <MoreHorizontal className="size-4" />
95      <span className="sr-only">More</span>
96    </span>
97  )
98}
99 
100export {
101  Breadcrumb,
102  BreadcrumbList,
103  BreadcrumbItem,
104  BreadcrumbLink,
105  BreadcrumbPage,
106  BreadcrumbSeparator,
107  BreadcrumbEllipsis,
108}