Breadcrumbs

1"use client";
2
3import * as React from "react";
4import { mergeProps } from "@base-ui/react/merge-props";
5import { useRender } from "@base-ui/react/use-render";
6import { HugeiconsIcon } from "@hugeicons/react";
7import {
8  ArrowRight01Icon,
9  MoreHorizontalIcon,
10} from "@hugeicons/core-free-icons";
11
12import { cn } from "@/lib/utils";
13
14type BreadcrumbVariant = "default" | "surface";
15type BreadcrumbSize = "sm" | "md" | "lg";
16
17interface BreadcrumbProps extends React.ComponentProps<"nav"> {
18  variant?: BreadcrumbVariant;
19  size?: BreadcrumbSize;
20  "aria-label"?: string;
21}
22
23function Breadcrumb({
24  variant = "default",
25  size = "md",
26  "aria-label": ariaLabel = "breadcrumb",
27  className,
28  ...props
29}: BreadcrumbProps) {
30  return (
31    <nav
32      aria-label={ariaLabel}
33      data-slot="breadcrumb"
34      data-variant={variant}
35      data-size={size}
36      className={cn("group", className)}
37      {...props}
38    />
39  );
40}
41
42function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
43  return (
44    <ol
45      data-slot="breadcrumb-list"
46      className={cn(
47        "text-muted-foreground inline-flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5",
48        "group-data-[size=sm]:gap-1 group-data-[size=sm]:text-xs group-data-[size=sm]:sm:gap-2",
49        "group-data-[size=lg]:gap-2 group-data-[size=lg]:text-base group-data-[size=lg]:sm:gap-3",
50        // surface variant — framed gray track lifted off the page.
51        "group-data-[variant=surface]:bg-muted group-data-[variant=surface]:rounded-lg group-data-[variant=surface]:p-1 group-data-[variant=surface]:shadow-[var(--surface-shadow-1),var(--surface-rim-1)]",
52        className,
53      )}
54      {...props}
55    />
56  );
57}
58
59interface BreadcrumbItemProps extends React.ComponentProps<"li"> {
60  "aria-label"?: string;
61}
62
63function BreadcrumbItem({
64  className,
65  "aria-label": ariaLabel,
66  ...props
67}: BreadcrumbItemProps) {
68  return (
69    <li
70      data-slot="breadcrumb-item"
71      className={cn("inline-flex items-center gap-1.5", className)}
72      aria-label={ariaLabel}
73      {...props}
74    />
75  );
76}
77
78type BreadcrumbLinkProps = useRender.ComponentProps<"a">;
79
80function BreadcrumbLink({ className, render, ...props }: BreadcrumbLinkProps) {
81  const defaultProps = {
82    "data-slot": "breadcrumb-link",
83    className: cn(
84      "rounded-sm transition-colors duration-200 hover:text-foreground",
85// … truncated