"use client";

import * as React from "react";

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

export interface MenuDropdownItem {
  id: string;
  label: string;
  href?: string;
  children?: MenuDropdownItem[];
}

export interface MenuDropdownProps
  extends React.HTMLAttributes<HTMLDivElement> {
  items: MenuDropdownItem[];
  triggerLabel?: string;
  openOnHover?: boolean;
  onItemSelect?: (id: string) => void;
}

export function MenuDropdown({
  items,
  triggerLabel = "Menu",
  openOnHover = true,
  onItemSelect,
  className,
  ...props
}: MenuDropdownProps) {
  const [open, setOpen] = React.useState(false);
  const [openSubmenu, setOpenSubmenu] = React.useState<string | null>(null);
  const containerRef = React.useRef<HTMLDivElement>(null);

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

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

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

  const handleTriggerClick = () => {
    if (openOnHover) {
      return;
    }
    setOpen((prev) => !prev);
  };

  const handleMouseEnter = () => {
    if (openOnHover) {
      setOpen(true);
    }
  };

  const handleMouseLeave = () => {
    if (openOnHover) {
      setOpen(false);
      setOpenSubmenu(null);
    }
  };

  return (
    <div
      ref={containerRef}
      className={cn("relative inline-flex", className)}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      {...props}
    >
      <button
        type="button"
        onClick={handleTriggerClick}
        className={cn(
          "inline-flex items-center gap-2 rounded-md border border-border bg-card",
          "px-3 py-2 text-sm font-medium 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"
      >
        {triggerLabel}
        <ChevronDownIcon className={cn("h-4 w-4", open && "rotate-180")} />
      </button>
      {open ? (
        <div
          role="menu"
          aria-label={triggerLabel}
          className={cn(
            "absolute left-0 top-full z-10 mt-2 min-w-56 rounded-lg",
            "border border-border bg-card p-2"
          )}
        >
          <div className="space-y-1">
            {items.map((item) => {
              const hasChildren = Boolean(item.children?.length);
              const ItemComponent: React.ElementType = item.href ? "a" : "button";
              const isSubmenuOpen = openSubmenu === item.id;

              return (
                <div
                  key={item.id}
                  className="relative"
                  onMouseEnter={() => setOpenSubmenu(item.id)}
                  onMouseLeave={() => setOpenSubmenu(null)}
                >
                  <ItemComponent
                    {...(item.href ? { href: item.href } : { type: "button" })}
                    onClick={() => {
                      onItemSelect?.(item.id);
                      if (!hasChildren) {
                        setOpen(false);
                        setOpenSubmenu(null);
                      }
                    }}
                    className={cn(
                      "flex w-full items-center justify-between 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"
                    )}
                    aria-haspopup={hasChildren ? "menu" : undefined}
                    aria-expanded={hasChildren ? isSubmenuOpen : undefined}
                  >
                    <span>{item.label}</span>
                    {hasChildren ? <ChevronRightIcon className="h-4 w-4" /> : null}
                  </ItemComponent>
                  {hasChildren ? (
                    <div
                      role="menu"
                      aria-label={item.label}
                      className={cn(
                        "absolute left-full top-0 ml-2 min-w-52 rounded-lg",
                        "border border-border bg-card p-2",
                        isSubmenuOpen ? "block" : "hidden"
                      )}
                    >
                      <div className="space-y-1">
                        {item.children?.map((child) => {
                          const ChildComponent: React.ElementType = child.href
                            ? "a"
                            : "button";

                          return (
                            <ChildComponent
                              key={child.id}
                              {...(child.href ? { href: child.href } : { type: "button" })}
                              onClick={() => {
                                onItemSelect?.(child.id);
                                setOpen(false);
                                setOpenSubmenu(null);
                              }}
                              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"
                              )}
                            >
                              {child.label}
                            </ChildComponent>
                          );
                        })}
                      </div>
                    </div>
                  ) : null}
                </div>
              );
            })}
          </div>
        </div>
      ) : null}
    </div>
  );
}

function ChevronDownIcon({ className }: { className?: string }) {
  return (
    <svg
      className={cn("transition-transform", className)}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <path
        d="M5 8L10 13L15 8"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function ChevronRightIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      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>
  );
}
Menu Dropdown

Dependencies

Files

Installation
