Mega Menu

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<MegaMenu />

Installation

Usage

Assemble it from compound components. Every MegaMenuItem needs a unique value and contains one MegaMenuTrigger and one MegaMenuContent.

import {
  MegaMenu,
  MegaMenuList,
  MegaMenuItem,
  MegaMenuTrigger,
  MegaMenuContent,
} from "@/components/ui/mega-menu";

<MegaMenu align="center">
  <MegaMenuList label="Main navigation">
    <MegaMenuItem value="products">
      <MegaMenuTrigger>Products</MegaMenuTrigger>
      <MegaMenuContent>{/* Large panel content */}</MegaMenuContent>
    </MegaMenuItem>

    <MegaMenuItem value="resources">
      <MegaMenuTrigger>Resources</MegaMenuTrigger>
      <MegaMenuContent>{/* Another set of content, possibly a different height */}</MegaMenuContent>
    </MegaMenuItem>
  </MegaMenuList>
</MegaMenu>

When panels for different items have different sizes, the container morphs its height and width automatically as you switch, instead of jumping instantly.

controlled mode

Pass value (the expanded item's value, or null for collapsed) and onValueChange to take over the open state; when omitted, the component manages it internally.

const [open, setOpen] = useState<string | null>(null);

<MegaMenu value={open} onValueChange={setOpen}>
  {/* ... */}
</MegaMenu>

Props

MegaMenu

MegaMenuList

MegaMenuItem

MegaMenuTrigger / MegaMenuContent

How it works

• A single morphing container: each MegaMenuContent registers its content into a shared collection at render time, and an internal Viewport renders them all in one container carrying layout; when you switch items, popLayout takes the exiting panel out of the layout flow so the container immediately measures the new content and tweens its height.
• Hover intent: moving the mouse onto a trigger expands it, and leaving the navigation bar only closes it after closeDelay, which leaves a buffer for moving onto the panel; moving back in cancels the close.
• The panel sits right under the navigation bar: it is an absolutely positioned child inside the nav rather than a portal, so moving the mouse between the trigger and the panel never closes it by accident.

Accessibility

• The trigger is a native button carrying aria-haspopup, aria-expanded, and — while expanded — aria-controls pointing at the panel region (role="region").
• Keyboard operation: Enter / Space toggles expansion; ArrowLeft / ArrowRight plus Home / End move between triggers (switching the panel too when one is already open); ArrowDown expands and moves focus into the panel; Escape closes it and focus returns to the trigger.
• Clicking outside the navigation bar closes the panel.
• When the user has "reduce motion" enabled at the system level, the height morph along with the displacement and scaling are disabled, leaving only a brief fade in and out.