"use client";

import * as React from "react";

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

export interface MegaMenuItem {
  label: string;
  description?: string;
  href?: string;
  icon?: React.ReactNode;
}

export interface MegaMenuColumn {
  title: string;
  items: MegaMenuItem[];
}

export interface MegaMenuFeaturedItem {
  label: string;
  description?: string;
  href?: string;
  icon?: React.ReactNode;
}

interface MegaMenuProps extends React.HTMLAttributes<HTMLDivElement> {
  triggerLabel?: string;
  columns: MegaMenuColumn[];
  featuredItems?: MegaMenuFeaturedItem[];
  align?: "left" | "center" | "right";
}

const alignmentClasses = {
  left: "left-0",
  center: "left-1/2 -translate-x-1/2",
  right: "right-0",
};

export function MegaMenu({
  triggerLabel = "Browse",
  columns,
  featuredItems = [],
  align = "left",
  className,
  ...props
}: MegaMenuProps) {
  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]);

  return (
    <div className={cn("relative inline-flex", className)} {...props}>
      <button
        ref={buttonRef}
        type="button"
        className={cn(
          "inline-flex items-center gap-2 rounded-md border border-border",
          "bg-background px-4 py-2 text-sm font-medium text-foreground",
          "transition-colors hover:bg-muted",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border"
        )}
        aria-expanded={open}
        aria-haspopup="menu"
        onClick={() => setOpen((prev) => !prev)}
      >
        {triggerLabel}
        <span className="text-muted-foreground">▾</span>
      </button>

      {open ? (
        <div
          ref={menuRef}
          role="menu"
          aria-label="Mega menu"
          className={cn(
            "absolute top-full z-50 mt-3",
            "w-[min(720px,90vw)]",
            "rounded-xl border border-border bg-card p-6",
            "animate-in fade-in-0 zoom-in-95",
            alignmentClasses[align]
          )}
        >
          <div
            className={cn(
              "grid gap-6",
              featuredItems.length > 0
                ? "lg:grid-cols-[minmax(0,1fr)_220px]"
                : "grid-cols-1"
            )}
          >
            <div
              className="grid gap-6"
              style={{
                gridTemplateColumns: `repeat(${Math.max(
                  columns.length,
                  1
                )}, minmax(0, 1fr))`,
              }}
            >
              {columns.map((column) => (
                <div key={column.title} className="space-y-3">
                  <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                    {column.title}
                  </p>
                  <div className="space-y-2">
                    {column.items.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-start gap-3 rounded-lg 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-border"
                          )}
                        >
                          {item.icon ? (
                            <span className="mt-0.5 text-primary">
                              {item.icon}
                            </span>
                          ) : null}
                          <span className="space-y-1">
                            <span className="block font-medium">
                              {item.label}
                            </span>
                            {item.description ? (
                              <span className="block text-xs text-muted-foreground">
                                {item.description}
                              </span>
                            ) : null}
                          </span>
                        </ItemComponent>
                      );
                    })}
                  </div>
                </div>
              ))}
            </div>

            {featuredItems.length > 0 ? (
              <div className="space-y-3">
                <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                  Featured
                </p>
                <div className="space-y-2">
                  {featuredItems.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-start gap-3 rounded-lg border border-border",
                          "bg-muted px-3 py-3 text-left text-sm text-foreground",
                          "transition-colors hover:bg-background",
                          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border"
                        )}
                      >
                        {item.icon ? (
                          <span className="mt-0.5 text-primary">
                            {item.icon}
                          </span>
                        ) : null}
                        <span className="space-y-1">
                          <span className="block font-medium">
                            {item.label}
                          </span>
                          {item.description ? (
                            <span className="block text-xs text-muted-foreground">
                              {item.description}
                            </span>
                          ) : null}
                        </span>
                      </ItemComponent>
                    );
                  })}
                </div>
              </div>
            ) : null}
          </div>
        </div>
      ) : null}
    </div>
  );
}
Mega Menu

Dependencies

Files

Installation
