Breadcrumb

1import type { HTMLAttributes, ReactNode } from "react";
2import { cn } from "@/lib/utils";
3import ChevronRight from "@/ui/icons/ChevronRight";
4
5// Breadcrumb Root
6type BreadcrumbProps = {
7  children: ReactNode;
8  className?: string;
9} & HTMLAttributes<HTMLElement>;
10
11export function Breadcrumb({ children, className, ...props }: BreadcrumbProps) {
12  return (
13    <nav aria-label="breadcrumb" className={cn("", className)} {...props}>
14      <ol className="flex items-center gap-1.5 text-sm">
15        {children}
16      </ol>
17    </nav>
18  );
19}
20
21// Breadcrumb Item
22type BreadcrumbItemProps = {
23  children: ReactNode;
24  className?: string;
25} & HTMLAttributes<HTMLLIElement>;
26
27export function BreadcrumbItem({ children, className, ...props }: BreadcrumbItemProps) {
28  return (
29    <li className={cn("inline-flex items-center gap-1.5", className)} {...props}>
30      {children}
31    </li>
32  );
33}
34
35// Breadcrumb Link
36type BreadcrumbLinkProps = {
37  children: ReactNode;
38  className?: string;
39  href?: string;
40} & HTMLAttributes<HTMLAnchorElement>;
41
42export function BreadcrumbLink({ children, className, href, ...props }: BreadcrumbLinkProps) {
43  return (
44    <a
45      href={href}
46      className={cn(
47        "text-muted-foreground hover:text-foreground transition-colors",
48        className
49      )}
50      {...props}
51    >
52      {children}
53    </a>
54  );
55}
56
57// Breadcrumb Page (current page, not a link)
58type BreadcrumbPageProps = {
59  children: ReactNode;
60  className?: string;
61} & HTMLAttributes<HTMLSpanElement>;
62
63export function BreadcrumbPage({ children, className, ...props }: BreadcrumbPageProps) {
64  return (
65    <span
66      role="link"
67      aria-disabled="true"
68      aria-current="page"
69      className={cn("text-foreground font-medium", className)}
70      {...props}
71    >
72      {children}
73    </span>
74  );
75}
76
77// Breadcrumb Separator
78type BreadcrumbSeparatorProps = {
79  children?: ReactNode;
80  className?: string;
81} & HTMLAttributes<HTMLLIElement>;
82
83export function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps) {
84  return (
85    <li
86      role="presentation"
87      aria-hidden="true"
88      className={cn("text-muted-foreground", className)}
89      {...props}
90    >
91      {children ?? <ChevronRight className="h-3.5 w-3.5" />}
92    </li>
93  );
94}
95
96// Breadcrumb Ellipsis (for collapsed items)
97type BreadcrumbEllipsisProps = {
98  className?: string;
99} & HTMLAttributes<HTMLSpanElement>;
100
101export function BreadcrumbEllipsis({ className, ...props }: BreadcrumbEllipsisProps) {
102  return (
103    <span
104      role="presentation"
105      aria-hidden="true"
106      className={cn("flex h-9 w-9 items-center justify-center text-muted-foreground", className)}
107      {...props}
108    >
109      <svg
110        xmlns="http://www.w3.org/2000/svg"
111        viewBox="0 0 24 24"
112        fill="currentColor"
113        className="h-4 w-4"
114      >
115        <circle cx="12" cy="12" r="1" />
116        <circle cx="19" cy="12" r="1" />
117        <circle cx="5" cy="12" r="1" />
118      </svg>
119      <span className="sr-only">More</span>
120    </span>
121  );
122}
123