Should it open on hover?

Click or tap to open is the safer default.

Wide enough for the groups to sit in columns people can scan. If you need the whole viewport, you wanted [Fullscreen slide menu](/motion/fullscreen-slide-menu/).

The trigger is a button. Tab should enter the open panel. Escape closes and focus returns to the trigger.

What does reduced motion do?

Show and hide the panel with no slide and no stagger.

Mega menu

A mega menu opens a wide panel of grouped links from a nav item, so a large set can be scanned without leaving the header.

MenusBuild difficulty: Mediumheight auto

Also called Flyout menu, Mega dropdown, Panel nav, Multi-column menu.

Here it is working.

Learn

Build

Library

Open Work, then Notes. The panel is the same box, new copy.

For designers

You reach for this when a single column of links would run off the screen, and the groups actually mean something: products, regions, topics. The panel should open on purpose, close on purpose, and not sit over the thing someone was about to press. Hover-only open rewards a perfectly still pointer. Give a click or a tap, a clear close, and a keyboard path. A featured image is fine if the links still come first. Motion is the open and the close.

Use this when

The nav holds more groups than a short list can show.
People need to scan categories without opening a new page.
The header has room for a wide panel on desktop.
You can close it with Escape, a click outside, and a visible control.

Reach for something else when

The screen is small or the nav is the whole task. Use Fullscreen slide menu.
You have a handful of peers and want a moving indicator. Use Morphing pill menu.
You wanted a bar that grows in place. Use Expanding strip.
The content is a set of cards to compare. Use Hoverable list or Card fan.

How to build it

Keep the trigger as a real button and the panel in the document, so the tab order still makes sense. Open and close with a short timeline: visibility first, then a little movement on y or height. Stagger columns by 30 to 50 milliseconds if the groups need a beat. If the trigger should turn into the panel, Flip is the official way. Trap focus while it is open. Return focus to the trigger on close. On reduced motion, snap open and shut.

Official GSAP

gsap.to height auto.

gsap.to(panel, { height: open ? 'auto' : 0, duration: 0.35, ease: 'power2.inOut', overflow: 'hidden' });

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

Should it open on hover?: Click or tap to open is the safer default.
How wide?: Wide enough for the groups to sit in columns people can scan. If you need the whole viewport, you wanted Fullscreen slide menu.
What about keyboard?: The trigger is a button. Tab should enter the open panel. Escape closes and focus returns to the trigger.
Does every nav item need one?: No.
What does reduced motion do?: Show and hide the panel with no slide and no stagger.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Fullscreen slide menu