Components

Mega Menu

Pro

A navigation panel that reshapes to each menu's content instead of swapping — measured width and height, a caret that tracks the trigger, keyboard-driven.

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/mega-menu

Unlock with Planes Pro

$99 once · 80 Pro components · lifetime updates.

I have a licenseGet Pro
<MegaMenu
  items={[
    { id: "product", label: "Product", width: 520, content: <ProductPanel /> },
    { id: "resources", label: "Resources", width: 380, content: <ResourcesPanel /> },
  ]}
/>

Examples

Measured morph

The panel is absolutely positioned, so animating its width and height only relayouts the panel itself, never the page. Content crossfades with a direction-aware slide; the caret tracks the trigger with a spring.

<MegaMenu items={items} align="start" />

Keyboard

Focus a trigger to open, ArrowDown to enter the panel, Escape to close. Reduced motion makes every step instant.

<MegaMenu items={items} />

Use cases

  • Multi-product navigation

    Vercel-style menu where each item has a differently sized panel.

  • Docs + resources

    Grouped link lists that reshape rather than swap.

  • E-commerce categories

    Wide grids for departments, narrow lists for help.

  • Marketing site header

    Pairs with ShrinkingNav.