Breadcrumb

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