use UI

Mega Menu

Also called mega dropdown, nav panel, flyout navigation

A large panel opened from a nav item, showing many grouped destinations at once.

Example

Trigger: aria-expanded="false" · panel role: none Nine links, three headed groups, and not a single role="menuitem". Tab walks the panel in reading order; Escape closes it from anywhere inside and hands focus back to the trigger.

When to use it

  • One nav item leads to twenty or more destinations that group naturally — products by category, docs by section.
  • The groups themselves are useful information: seeing the shape of the catalogue helps people choose.
  • The site is browsed by people who do not yet know what they want.

When not to

  • There are six links. A plain dropdown does it without the layout work or the panel-sized dead zone.
  • The items are actions rather than destinations. Actions in a nav panel are a dropdown menu, and that one really is `role="menu"`.
  • On mobile. A full-width panel over a phone screen is a page — so make it one, or an accordion in a drawer.

Trade-offs

  • Reveals structure that a nested dropdown hides one level at a time.
  • Room for descriptions, icons and featured items, which flat lists cannot carry.
  • One interaction instead of hovering through three levels of submenus.
  • Large panels opened on hover are easy to trigger by accident and hard to leave.
  • Tempting to fill: once the space exists, every team wants a link in it.
  • Frequently mis-roled as a menu, which promises arrow-key navigation the panel does not implement.

Accessibility

What this pattern needs in order to work for everyone.

Keyboard
  • The trigger is a `<button>` with `aria-expanded`. Enter and Space open it; Escape closes it and returns focus to the trigger.
  • Inside, links are links — Tab moves through them in reading order. No arrow-key model, because none was promised.
  • Never open on hover alone. Hover may open it for the pointer, but focus and click must do the same job, and a touch device only has the latter.
Roles and state
  • A panel of links is a disclosure, not a menu. Use `aria-expanded` and `aria-controls` on the trigger and leave the panel as plain markup — no `role="menu"`, no `role="menuitem"`.
  • `role="menu"` promises arrow navigation, typeahead and a single tab stop. Links inside a menu also stop being announced as links.
  • Group with real headings and `<ul>`s, so a screen reader can announce “Analytics, list of 6 items” instead of one flat run of links.
  • Closing on outside click is expected, but the panel must also close on Escape from anywhere inside it.
Focus
Opening does not move focus into the panel — the trigger keeps it, and Tab walks in. Closing with Escape must return focus to the trigger, or the user is dropped at the top of the document.

In the wild

  • Stripe — Grouped product panel with descriptions, opening on hover and on click, closing on Escape.
  • GOV.UK — Deliberately avoids mega menus for a simple header and hub pages — a fair reminder that the pattern is a cost.

Compared with

Side-by-side breakdowns of patterns that solve a similar problem.