breadcrumb

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