Breadcrumb

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