Should a mega menu open on hover or click?

Hover-open feels fast on desktop but is a known accessibility trap (it's hard for keyboard and screen-reader users, and accidental on touch). The robust pattern is click/focus-open with optional hover-open gated behind `(hover: hover)` via matchMedia. Always make it keyboard-operable and Escape-closable.

How do I keep the trigger button from looking 'inactive' while the panel is open?

Use the animated-active-state contract: the trigger accepts an `active` prop tied to the panel's open state, and mirrors its hover end-state via `data-active` while active. Without it the button animates back to rest the moment the cursor leaves, even though the panel is still open - a visual mismatch.

What should a mega menu collapse to on mobile?

A fullscreen slide menu or a nested accordion drawer. Mega-menu columns don't fit a phone, and hover doesn't exist on touch. Use matchMedia to swap the desktop mega panel for a touch-friendly drawer below your breakpoint.

Motion pattern

Mega Menu

A mega menu is a large navigation panel that opens below a top-level item to reveal grouped links, often with columns, descriptions, and media. It suits sites with deep navigation that a simple dropdown can't hold. Built with paired GSAP timelines for open and close, plus full keyboard and focus-trap handling.

Updated June 2, 2026

Components

Components that solve this

Multi-Level Drawer MenuA drawer menu with two panels.Mega MenuOne dropdown that grows and shrinks to fit as you move between menu groups, opening from whichever side you came from.Fullscreen Slide MenuA fullscreen menu where the whole page slides, turns and shrinks away as a dark panel comes in over it, so it feels like turning a page.

Tradeoffs

Tuning the pattern

Open trigger: Mega Menu defaults `trigger-event` to hover with an `open-delay` of 0.15s and `close-delay` of 0.2s to absorb accidental cursor passes; hover feels fast on desktop but is an accessibility trap, so back it with click and focus open and gate the hover behind `(hover: hover)`, and either way drive the trigger's `active` state from the panel so the button does not visually disengage while the panel is still open.
Panel transition: A single shared panel that morphs between sections is cheaper on DOM and gives one continuous motion, but it forces every section to share a layout; per-item panels cost more nodes yet let each section design its own columns and media, so pick shared for uniform link grids and per-item when the previews genuinely differ.
Mobile fallback: Mega Menu swaps to a touch layout below `mobile-breakpoint` 768 because columns and hover do not survive a phone; collapse to a Fullscreen Slide Menu when the nav is broad and shallow, or a Multi-Level Drawer Menu when the hierarchy is deep enough to need nested cascading panels.

When

A mega menu earns its complexity when navigation is genuinely deep. If a simple dropdown holds your links, use the dropdown.

Large product catalogs with categories and subcategories
Multi-product companies grouping links by product line
Documentation sites with many top-level sections
Marketing sites where each nav item opens a rich preview with descriptions and media

Don't reach for a mega menu by default

A mega menu is a lot of surface to design, animate, and make accessible. If your site has six links and one level of depth, a standard nav with a small dropdown is the right call. The mega menu is for genuine navigational depth.

Mechanics

How the panel animates

Open and close usually want different mechanics, so they get separate timelines rather than a single reversed one. The open eases the panel down and staggers its columns in; the close is faster and flatter. The trigger holds its active state for the panel's whole lifetime via the animated-active-state contract, so the button doesn't visually disengage while the panel is still open.

script.js

In production

Annnimate components that solve this pattern

The Mega Menu component handles the multi-column panel, paired open/close timelines, keyboard navigation, focus trap, and the active-state contract on the trigger
The Fullscreen Slide Menu is the right fallback when the mega menu collapses on mobile
The Multi-Level Drawer Menu handles deep hierarchy as a cascading drawer when columns won't fit

FAQ

Common questions

Should a mega menu open on hover or click?: Hover-open feels fast on desktop but is a known accessibility trap (it's hard for keyboard and screen-reader users, and accidental on touch). The robust pattern is click/focus-open with optional hover-open gated behind (hover: hover) via matchMedia. Always make it keyboard-operable and Escape-closable.
How do I keep the trigger button from looking 'inactive' while the panel is open?: Use the animated-active-state contract: the trigger accepts an active prop tied to the panel's open state, and mirrors its hover end-state via data-active while active. Without it the button animates back to rest the moment the cursor leaves, even though the panel is still open - a visual mismatch.
What should a mega menu collapse to on mobile?: A fullscreen slide menu or a nested accordion drawer. Mega-menu columns don't fit a phone, and hover doesn't exist on touch. Use matchMedia to swap the desktop mega panel for a touch-friendly drawer below your breakpoint.

PreviousMarqueeA marquee is a continuously scrolling strip of content, text or logos or images, that loops seamlessly.NextPage TransitionA page transition animates the move between routes instead of a hard cut, a cover that wipes across, a shared element that morphs from one page to the next, or a fade that masks the swap.

Related patterns

Adjacent ideas in the patterns

Page TransitionA page transition animates the move between routes instead of a hard cut, a cover that wipes across, a shared element that morphs from one page to the next, or a fade that masks the swap.Sticky CursorA sticky cursor replaces or augments the native pointer with a custom element that follows the mouse with smoothing, and reacts to what it hovers, growing over links, snapping to buttons, showing a label.