Mega Menu

In products with wide categories, a menu that opens one level at a time asked for too much hand work. Getting from women's clothing to shoes to boots meant holding the pointer inside a narrow corridor, and drifting slightly off it closed the menu and sent you back to the start. Corridor menus punish imprecision, and imprecision is the normal state of a hand on a mouse.

Worse than the closing was the invisibility. Finding out what sat two levels down required hovering over that item, so nobody had a way to survey what the product carried. Opening it all at once removes both problems: there's less pointer work, and the open panel itself becomes a map of what this product covers.

The pointer lands and a panel covering most of the screen width drops open. How that panel is arranged is the whole of this pattern.

1. Group into columns and give every group a heading. Forty links with no headings read as one mass, and finding something takes longer than it did in the level-by-level menu.
2. The capacity is about four to six columns of six to eight items. Thirty to fifty is the ceiling for something the eye can scan; past that, people have to search inside the panel, and a search field inside it is the honest answer.
3. Put a short delay on opening and closing. Open on the slightest brush and the screen jumps every time the mouse moves. Open after roughly 0.2 seconds of rest, and wait a similar interval after the pointer leaves before closing.
4. It has to be reachable by keyboard. Tab has to walk every item in the panel, and Escape has to close it. Build it so hover is the only trigger and everything under that item simply doesn't exist for someone using a keyboard.
5. Touch screens have no hover. Open the panel on the first tap and navigate on the second, or switch form entirely to a hamburger menu on narrow screens. Making the top-level item a link itself means it navigates before it ever opens.

The condition this form needs is categories that are wide and shallow. On something deep and narrow, half the open panel stays empty.

"There are only three categories here. This should be a sidebar, not a mega menu."

The structure isn't wide and shallow.

"Add a delay to the mega menu. It jumps every time the mouse passes over."

The opening trigger is too sensitive.

"Thirty links in the panel with no headings makes finding things slower."

The grouping and the headings are missing.

Pagedeck looked at this form for its template gallery and dropped it. Noa drew the panel and found four categories with three templates each, which left the bottom half of a four-column panel empty. Categories went into the sidebar vertically instead.