What is a mega menu — and why it shouldn't open instantly

You move the mouse from a menu item toward a link in the panel that dropped down. The path runs diagonally — and on the way, the cursor brushes the neighboring item. The panel instantly switches to the wrong one. The link you were reaching for is gone. Start over.

This annoyance has a name: the diagonal problem. And Amazon once solved it with geometry — an imaginary triangle. Let's look at what a mega menu is and how to keep it from playing hide-and-seek with people.

What is a mega menu

It's a big dropdown panel where a site's sections are laid out across an area instead of in a single column. The usability researchers at Nielsen Norman Group describe it like this:

• a big two-dimensional panel divided into groups;
• structure comes from layout, typography, sometimes icons;
• everything is visible at once, no scrolling;
• it opens on hover, click or tap.

Where you've seen one: online stores with dozens of categories, university websites, big services. Anywhere there are too many sections for a regular list.

After testing with users, NN/g says it plainly: mega menus work well for site navigation.

Why it beats a regular dropdown

A regular dropdown on a big site has three problems.

1. It hides most of the options. You have to scroll. And scrolling hides the top, so you end up comparing options from memory.
2. It has no real grouping. Unless you indent sub-items with spaces.
3. It's text only. You can't add a product photo or make the key link bigger.

A mega menu fixes all three: groups sit in columns, everything's visible at once, there's room for pictures. But if you have five or six sections, you don't need one — a regular menu will do.

How it should open: half a second and a triangle

When a menu opens on hover, the browser doesn't know what the person wants. Maybe they're looking at the item. Or maybe they're just moving the mouse across the header toward the banner.

NN/g recommends this timing:

1. The pointer should rest on the item for 0.5 seconds.
2. If it's still there, show the panel in under 0.1 seconds.
3. Keep the panel open until the pointer has been outside both the item and the panel for half a second.
4. Then remove it — again in under 0.1 seconds.

Without the pause, the menu flickers with every mouse movement. But the pause alone doesn't cure the diagonal. A fast user crosses the neighboring item in a fraction of a second. A slow one — an older person, say — doesn't make it, and the panel changes right under their hand.

That's where Amazon's trick comes in. Developer Ben Kamens broke it down in 2013. Instead of a delay, the menu watches the pointer's direction. Picture a triangle from the pointer to the top and bottom corners of the open panel. As long as the mouse moves inside that triangle, the person is probably heading into the panel — so it stays. Once the mouse leaves the triangle, the item switches instantly.

The menu feels fast and doesn't lose the panel on the diagonal. Kamens even released it as a jQuery plugin, jQuery-menu-aim.

If you're building the menu with AI, there's a simpler path: open it on click, not on hover. A click is the clearest signal of intent. The diagonal problem disappears entirely, and on touchscreens and keyboards there's no hover anyway.

Accessibility and small screens

• Markup. The W3C builds site navigation with the disclosure pattern: each section gets a real button with aria-expanded, inside is an ordinary list of links, and Esc closes the panel. The menu role isn't needed.
• Screen magnifiers. Someone using a magnifier sees only part of a wide panel and assumes that's all there is. A faint shadow on the right edge won't tip them off. Don't make the panel wider than it needs to be.
• No forms inside. NN/g advises against fields and buttons in a mega menu. Especially search: it should always be visible, not only when the panel is open.
• Phones. On a narrow screen, a mega menu turns into sections that expand on tap. How to rework a header for mobile is in the guide how to make your site mobile-friendly.

Does a mega menu hurt Google Search?

If the panel contains ordinary <a href> links that are in the HTML from the start, the crawler sees them. The trouble starts when links are loaded by a script only on hover: the crawler doesn't hover. More in the article what is SEO.

How many groups should a mega menu have?

A moderate number. NN/g warns against huge groups that take long to scan and against a scatter of tiny ones. Keep labels short with the key word first, and list each item in the menu only once.

Should it open on hover or on click?

For a beginner — on click: it's simpler, more reliable and more accessible. Hover makes sense if you add a pause of about half a second and protection against the diagonal. Without those, don't bother.