Breadcrumb

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