"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface BreadcrumbTrailItem {
  label: string;
  href?: string;
}

export interface BreadcrumbTrailProps
  extends React.HTMLAttributes<HTMLElement> {
  items: BreadcrumbTrailItem[];
  maxVisible?: number;
}

export function BreadcrumbTrail({
  items,
  maxVisible = 4,
  className,
  ...props
}: BreadcrumbTrailProps) {
  const [open, setOpen] = React.useState(false);
  const menuRef = React.useRef<HTMLDivElement>(null);
  const buttonRef = React.useRef<HTMLButtonElement>(null);

  React.useEffect(() => {
    if (!open) {
      return undefined;
    }

    const handleClickOutside = (event: MouseEvent) => {
      if (
        menuRef.current &&
        !menuRef.current.contains(event.target as Node) &&
        buttonRef.current &&
        !buttonRef.current.contains(event.target as Node)
      ) {
        setOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [open]);

  React.useEffect(() => {
    if (!open) {
      return undefined;
    }

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setOpen(false);
        buttonRef.current?.focus();
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [open]);

  if (items.length === 0) {
    return null;
  }

  const showDropdown = items.length > maxVisible;
  const firstItem = items[0];
  const lastItem = items[items.length - 1];
  const middleItems = items.slice(1, items.length - 1);

  const renderItem = (item: BreadcrumbTrailItem, isCurrent: boolean) => {
    const ItemComponent: React.ElementType = item.href ? "a" : "span";

    return (
      <ItemComponent
        {...(item.href ? { href: item.href } : {})}
        className={cn(
          "text-sm font-medium transition-colors",
          "motion-safe:transition-transform motion-safe:duration-300",
          item.href && !isCurrent && "text-foreground hover:text-primary",
          isCurrent ? "text-primary" : "text-foreground"
        )}
      >
        {item.label}
      </ItemComponent>
    );
  };

  return (
    <nav className={cn("w-full", className)} {...props}>
      <ol className="flex flex-wrap items-center gap-2">
        <li className="flex items-center gap-2">
          {renderItem(firstItem, items.length === 1)}
        </li>
        {showDropdown ? (
          <>
            <li className="flex items-center gap-2">
              <BreadcrumbSeparator />
              <div className="relative">
                <button
                  ref={buttonRef}
                  type="button"
                  onClick={() => setOpen((prev) => !prev)}
                  className={cn(
                    "flex items-center gap-1 rounded-md border border-border bg-card",
                    "px-2 py-1 text-sm text-foreground",
                    "transition-colors hover:text-primary",
                    "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
                  )}
                  aria-expanded={open}
                  aria-haspopup="menu"
                >
                  <MoreIcon className="h-4 w-4" />
                  <span className="sr-only">Show more breadcrumbs</span>
                </button>
                <div
                  ref={menuRef}
                  role="menu"
                  aria-label="Breadcrumb overflow"
                  className={cn(
                    "absolute left-0 top-full z-10 mt-2 w-56 rounded-lg",
                    "border border-border bg-card p-2",
                    "transition-all duration-200",
                    open
                      ? "opacity-100 translate-y-0"
                      : "pointer-events-none opacity-0 translate-y-1"
                  )}
                >
                  <div className="space-y-1">
                    {middleItems.map((item) => {
                      const ItemComponent: React.ElementType = item.href
                        ? "a"
                        : "button";

                      return (
                        <ItemComponent
                          key={item.label}
                          {...(item.href ? { href: item.href } : { type: "button" })}
                          onClick={() => setOpen(false)}
                          className={cn(
                            "flex w-full items-center rounded-md px-3 py-2 text-left text-sm",
                            "text-foreground transition-colors hover:text-primary",
                            "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
                          )}
                        >
                          {item.label}
                        </ItemComponent>
                      );
                    })}
                  </div>
                </div>
              </div>
            </li>
            <li className="flex items-center gap-2">
              <BreadcrumbSeparator />
              {renderItem(lastItem, true)}
            </li>
          </>
        ) : (
          items.slice(1).map((item, index) => {
            const isCurrent = index === items.length - 2;
            return (
              <li key={item.label} className="flex items-center gap-2">
                <BreadcrumbSeparator />
                {renderItem(item, isCurrent)}
              </li>
            );
          })
        )}
      </ol>
    </nav>
  );
}

function BreadcrumbSeparator() {
  return (
    <svg
      className="h-3.5 w-3.5 text-foreground"
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <path
        d="M7 4L13 10L7 16"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function MoreIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <circle cx="5" cy="10" r="1.5" fill="currentColor" />
      <circle cx="10" cy="10" r="1.5" fill="currentColor" />
      <circle cx="15" cy="10" r="1.5" fill="currentColor" />
    </svg>
  );
}
Breadcrumb Trail

Dependencies

Files

Installation
