Mega Dropdowns
Somebody moves the cursor toward the search box at the top of a retail site. On the way it crosses the word Furniture, and a panel four columns wide drops over the page.
Big menus, easy choices: learn the patterns hands-free on your way.
Listen to the full Mega Dropdowns course on DesignPath
They move on, cross Lighting, and a different panel replaces the first one. The search box is now behind an overlay nobody asked for. This happens on the way to almost anything at the top of that page, several times a session, to every person using a mouse.
A mega menu shows a whole level of the site's structure at once, in a two-dimensional panel rather than a list. That is a real advantage over a chain of nested submenus, and it is why large retailers, banks and universities keep reaching for one.
It also means the component is only ever as good as the structure it displays. Most of the work in this module is deciding what opens the panel, what goes inside it, and whether the site needed one at all.
Anatomy of a Mega Menu
Three components get called the same thing in most design reviews, and they behave differently enough that the confusion costs real time.
Naming them settles which one is on the screen, and which of its parts is causing the trouble.
Three Menus in One Family
A dropdown is a single column of links under one top-level item. A flyout nests, so each item opens another list beside it, and reaching the third level means holding a path through two of them. A mega menu is a panel wide enough to hold several columns, showing an entire level of the structure at once.
The mega menu exists because the flyout is fragile. Everything sits on one surface, so nothing has to be held open on the way to anything else.
The Parts of a Panel
Eight, and most menus use six.
The trigger, which is the top-level item in the header. The panel it opens. The groups inside, usually as columns. A heading on each group. The links themselves. A see-all link, the route to the category page itself. An optional featured slot carrying a promotion, an image or a highlighted product. And the close affordance, which is often only the Escape key and a click outside.
Everything Visible, Once
Nielsen and Li's rule at Nielsen Norman Group is that a mega menu is a two-dimensional panel divided into groups, with everything visible at once and no scrolling.
That is the constraint the whole component rests on. A panel that scrolls has become a page with worse ergonomics, and its lower half is invisible to somebody who never scrolls a menu. The second half of the rule is that each option appears exactly once, since a link showing up under two headings tells people the two headings mean the same thing.
What the Trigger Has to Decide
The trigger carries two questions that the rest of the module answers.
The first is what opens the panel, hover or a tap, which is article 4. The second is whether the top-level word is also a link to the category page, which article 5 covers along with the see-all link that usually replaces it. Both decisions are made in a header that has room for about seven words, which is why they get made by default.
Pro tip: Draw your panel at full width with real link names, then count the links. If the count surprises the person who owns the taxonomy, the conversation to have is about the structure rather than the menu.