"use client";

import * as React from "react";

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

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

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

export function BreadcrumbDropdown({
  items,
  maxVisible = 4,
  className,
  ...props
}: BreadcrumbDropdownProps) {
  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: BreadcrumbItem) => {
    const ItemComponent: React.ElementType = item.href ? "a" : "span";

    return (
      <ItemComponent
        {...(item.href ? { href: item.href } : {})}
        className={cn(
          "text-sm",
          item.href
            ? "text-muted-foreground transition-colors hover:text-foreground"
            : "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)}
        </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:bg-muted",
                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                  )}
                  aria-expanded={open}
                  aria-haspopup="menu"
                >
                  <MoreIcon className="h-4 w-4" />
                  <span className="sr-only">Show more breadcrumbs</span>
                </button>
                {open ? (
                  <div
                    ref={menuRef}
                    role="menu"
                    aria-label="Breadcrumb overflow"
                    className="absolute left-0 top-full z-10 mt-2 w-56 rounded-lg border border-border bg-card p-2 shadow-lg"
                  >
                    <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:bg-muted",
                              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                            )}
                          >
                            {item.label}
                          </ItemComponent>
                        );
                      })}
                    </div>
                  </div>
                ) : null}
              </div>
            </li>
            <li className="flex items-center gap-2">
              <BreadcrumbSeparator />
              {renderItem(lastItem)}
            </li>
          </>
        ) : (
          items.slice(1).map((item) => (
            <li key={item.label} className="flex items-center gap-2">
              <BreadcrumbSeparator />
              {renderItem(item)}
            </li>
          ))
        )}
      </ol>
    </nav>
  );
}

function BreadcrumbSeparator() {
  return (
    <svg
      className="h-3.5 w-3.5 text-muted-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 Dropdown

Dependencies

Files

Installation
