Breadcrumb

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