Breadcrumb

1import { useRender } from "@base-ui/react/use-render";
2import { ChevronRight, MoreHorizontal } from "lucide-react";
3import * as React from "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  className,
36  render = <a />,
37  ...props
38}: React.ComponentProps<"a"> & {
39  render?: useRender.RenderProp;
40}) {
41  return useRender({
42    render,
43    props: {
44      "data-slot": "breadcrumb-link",
45      className: cn("hover:text-foreground transition-colors", className),
46      ...props,
47    },
48  });
49}
50 
51function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
52  return (
53    <span
54      data-slot="breadcrumb-page"
55      role="link"
56      aria-disabled="true"
57      aria-current="page"
58      className={cn("text-foreground font-normal", className)}
59      {...props}
60    />
61  );
62}
63 
64function BreadcrumbSeparator({
65  children,
66  className,
67  ...props
68}: React.ComponentProps<"li">) {
69  return (
70    <li
71      data-slot="breadcrumb-separator"
72      role="presentation"
73      aria-hidden="true"
74      className={cn("[&>svg]:size-3.5", className)}
75      {...props}
76    >
77      {children ?? <ChevronRight />}
78    </li>
79  );
80}
81 
82function BreadcrumbEllipsis({
83  className,
84  ...props
85}: React.ComponentProps<"span">) {
86  return (
87    <span
88      data-slot="breadcrumb-ellipsis"
89      role="presentation"
90      aria-hidden="true"
91      className={cn("flex size-9 items-center justify-center", className)}
92      {...props}
93    >
94      <MoreHorizontal className="size-4" />
95      <span className="sr-only">More</span>
96    </span>
97  );
98}
99 
100export {
101  Breadcrumb,
102  BreadcrumbEllipsis,
103  BreadcrumbItem,
104  BreadcrumbLink,
105  BreadcrumbList,
106  BreadcrumbPage,
107  BreadcrumbSeparator,
108};