UX Patterns Guide

Application · lesson 16 of 21 · Navigation And Wayfinding

Mega menu

Underlying principle: Navigation exposes the site's structure at the moment a person needs to move. A useful route has a recognizable label, a predictable destination, and an orientation cue after arrival.

Provide a scoped mega menu from a top-level navigation trigger when a section has enough child destinations to justify a wide grouped panel, with clear grouping, accessible disclosure behavior, and responsive destination parity.

Start with the decision

Does this fit your task?

A top-level navigation section has many related child destinations.

Review the boundary: Compare the task with the alternatives in the decision section.

Review the decision →
Try the live example →Compare alternatives →
Study the interaction

Follow the task before choosing the component

Navigation exposes the site's structure at the moment a person needs to move. A useful route has a recognizable label, a predictable destination, and an orientation cue after arrival.

01 / Recognize the need

What the person is doing

The information architecture has a few top-level sections, but at least one section has many child destinations.

02 / Design the response

What the interface must communicate

Provide a scoped mega menu from a top-level navigation trigger when a section has enough child destinations to justify a wide grouped panel, with clear grouping, accessible disclosure behavior, and responsive destination parity.

Closed state with a clear top-level trigger and visible submenu indicator.

03 / Judge the outcome

What to look for

Which top-level section has enough child destinations to justify a mega menu?

Activating a mega-menu trigger opens the panel and updates aria-expanded on that trigger.

Practice this pattern: Sketch mega menu for this situation: A top-level navigation section has many related child destinations. Include this state: Closed state with a clear top-level trigger and visible submenu indicator. Review your sketch with this question: Which top-level section has enough child destinations to justify a mega menu?

Study the Navigation And Wayfinding family →Read the underlying principle →
Decision first

Choose this pattern when the problem matches

Use when

  • A top-level navigation section has many related child destinations.
  • Users need to scan or compare destinations before choosing one.
  • The IA can be grouped into a few clear columns or sections.
  • There is a tested responsive equivalent for small screens.

Avoid when

  • The section has only a few child links.
  • The panel would become a site map or dumping ground.
  • The menu would contain actions rather than navigation destinations.
  • Users need persistent local context after choosing a destination; side navigation may be better there.

Problem it prevents

The information architecture has a few top-level sections, but at least one section has many child destinations.

Test the behavior

Try strong and weak versions of the interaction

Open the working example, try its controls, and compare the behavior against the decision guidance.

In the lab you can
  • switch between strong UI, weak UI, strong UX, and weak UX;
  • trigger required, empty, loading, error, and recovery states;
  • inspect keyboard and accessibility expectations beside the demo.
Launch Mega menu in the lab
Pattern anatomy

What a strong implementation has to make clear

User need

The information architecture has a few top-level sections, but at least one section has many child destinations.

Pattern promise

Provide a scoped mega menu from a top-level navigation trigger when a section has enough child destinations to justify a wide grouped panel, with clear grouping, accessible disclosure behavior, and responsive destination parity.

Required state

Closed state with a clear top-level trigger and visible submenu indicator.

Failure to inspect

Hover-only access prevents keyboard and touch users from opening the panel.

Access contract

Use a labeled navigation landmark and disclosure buttons for triggers that open panels.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A Products trigger opens a full-width panel with grouped columns for Build, Operate, Analyze, and Govern, each with concise links and one highlighted featured destination.
  • A government services header uses a mega menu only for a section with many child pages and keeps search, language, and sign-in controls outside the panel.
  • A mobile breakpoint turns each mega-menu section into stacked accordion groups with the same destinations available.
  • A user opens Products, scans grouped links, selects Data pipeline, and the panel closes while the destination becomes the current section.
Weak implementation

Vague, hidden, hard to recover from

  • A mega menu opens for a section that only has three links, adding a large empty panel instead of a simple dropdown.
  • The panel mixes Products, Help, Billing, Sign out, promotional cards, and unrelated external links under one trigger.
  • Collapsed panels stay in the tab order, so keyboard users traverse invisible links.
  • The panel appears only on hover, closes while the pointer crosses a gap, and forces the user to restart navigation.
UI guidance
  • Use a mega menu as a wide disclosure panel attached to a top-level navigation item, with grouped headings, scannable link columns, and a clear relationship to the trigger that opened it.
  • Keep the panel focused on one navigation section; separate utilities, account actions, search, and unrelated service links from destination groups.
UX guidance
  • Use mega menus to expose a deep hierarchy before users commit to a destination, reducing drill-down when a section has many related pages.
  • Make opening, closing, and keyboard movement predictable: explicit trigger state, Escape dismissal, outside-click dismissal, visible focus, and no focusable hidden links.
Implementation contract

What the implementation must handle

States

  • Closed state with a clear top-level trigger and visible submenu indicator.
  • Open panel state with grouped columns and visible focusable links.
  • Active destination state after a link is selected and the panel closes.
  • Keyboard dismissal state where Escape closes the panel and returns focus to the trigger.

Interaction

  • Activating a mega-menu trigger opens the panel and updates aria-expanded on that trigger.
  • Only one mega panel is open at a time unless the design deliberately supports side-by-side comparison.
  • Hidden panel links are removed from the tab order and accessibility tree or otherwise made unavailable until the panel opens.
  • Selecting a destination closes the panel and navigates or updates the current destination state.

Accessibility

  • Use a labeled navigation landmark and disclosure buttons for triggers that open panels.
  • Expose expanded and collapsed state programmatically with aria-expanded.
  • Provide another way to reach submenu destinations, such as parent landing pages or repeated links.
  • Make focus visible in both trigger row and panel links.

Review

  • Which top-level section has enough child destinations to justify a mega menu?
  • Can users predict what is inside the panel from the trigger label?
  • Are group headings based on user tasks rather than internal teams?
  • What is the exact keyboard path to open, choose, and dismiss the panel?
Evidence trail

Source-backed claims behind this guidance

USWDS Header component

U.S. Web Design System - checked

USWDS documents basic and extended header megamenu variants for deep hierarchy and recommends basic dropdowns when there is not enough content.

WAI Fly-out Menus tutorial

W3C Web Accessibility Initiative - checked

WAI documents fly-out navigation behavior, submenu indicators, aria-expanded, pointer delay, keyboard access, and alternate access to submenu items.

Carbon Global Header pattern

IBM Carbon Design System - checked

Carbon header guidance supports product navigation submenus, utility separation, and responsive collapse into panels.

Full agent/debug reference

Problem Context

  • The information architecture has a few top-level sections, but at least one section has many child destinations.
  • Users need to compare related destinations before navigating.
  • The product or site has enough horizontal space on desktop and a planned equivalent interaction on small screens.

Selection Rules

  • Choose a mega menu when a top-level section has a deep hierarchy or more links than a basic dropdown can comfortably present.
  • Keep the number of top-level triggers small enough that the header still scans as primary navigation.
  • Group links by user-understandable categories, not internal ownership or database structure.
  • Use a simple dropdown, landing page, side navigation, or search when the section has too few links for a mega menu.
  • Keep utility links and account actions outside the panel unless the trigger specifically represents those tools.
  • Provide an explicit trigger state with aria-expanded and ensure collapsed panel links are not focusable.
  • Close the panel on Escape, outside click, selecting a destination, or activating the trigger again.
  • Provide a mobile equivalent that preserves the same destinations in a drawer, accordion, or stacked disclosure structure.

Required States

  • Closed state with a clear top-level trigger and visible submenu indicator.
  • Open panel state with grouped columns and visible focusable links.
  • Active destination state after a link is selected and the panel closes.
  • Keyboard dismissal state where Escape closes the panel and returns focus to the trigger.
  • Pointer forgiveness state where diagonal movement into the panel does not immediately close it.
  • Responsive state where the same groups and links are available in mobile navigation.
  • No-JavaScript or fallback state where parent destinations remain reachable.

Interaction Contract

  • Activating a mega-menu trigger opens the panel and updates aria-expanded on that trigger.
  • Only one mega panel is open at a time unless the design deliberately supports side-by-side comparison.
  • Hidden panel links are removed from the tab order and accessibility tree or otherwise made unavailable until the panel opens.
  • Selecting a destination closes the panel and navigates or updates the current destination state.
  • Escape closes the panel and restores focus to the trigger that opened it.
  • Hover behavior is forgiving and never the only way to open or use the menu.
  • The responsive version exposes the same destination set as desktop.

Implementation Checklist

  • Audit the IA first and confirm which top-level sections actually need large grouped panels.
  • Write group headings and link labels from user language, keeping repeated words out of every link where a group label can carry the context.
  • Use button semantics for triggers that only open panels; use a separate link when the parent also has a destination page.
  • Set aria-expanded on the trigger and keep panel visibility synchronized with focus, pointer, route, and viewport changes.
  • Hide collapsed-panel links from keyboard focus and screen readers.
  • Implement Escape, outside-click, trigger-toggle, destination-selection, and viewport-change closing behavior.
  • Test diagonal pointer movement, keyboard order, screen reader announcement, mobile parity, and destination-current state.

Common Generated-UI Mistakes

  • Using a mega menu as a complete site map.
  • Opening a huge panel for a shallow section.
  • Mixing utilities, account actions, and unrelated marketing links with navigation destinations.
  • Relying on hover alone for access.
  • Leaving hidden links focusable when the panel is closed.
  • Dropping or renaming destinations at mobile breakpoints.
  • Using ARIA menu roles for ordinary site navigation links.

Critique Questions

  • Which top-level section has enough child destinations to justify a mega menu?
  • Can users predict what is inside the panel from the trigger label?
  • Are group headings based on user tasks rather than internal teams?
  • What is the exact keyboard path to open, choose, and dismiss the panel?
  • Does mobile expose the same destinations without a second hidden IA?
Accessibility
  • Use a labeled navigation landmark and disclosure buttons for triggers that open panels.
  • Expose expanded and collapsed state programmatically with aria-expanded.
  • Do not use ARIA menu or menubar roles for ordinary site navigation unless implementing the full application-menu interaction model.
  • Ensure hidden panel content is not reachable by Tab or screen reader navigation while closed.
  • Provide another way to reach submenu destinations, such as parent landing pages or repeated links.
  • Make focus visible in both trigger row and panel links.
Keyboard Behavior
  • Tab reaches each top-level trigger in order without entering closed panels.
  • Enter or Space opens a closed panel trigger and can close an open one.
  • Escape closes the open panel and returns focus to its trigger.
  • Tab moves through only visible links in the open panel and then to the next logical control.
  • Optional arrow-key support must not replace standard Tab and Enter behavior for site navigation.
Variants
  • Basic header mega menu
  • Extended header mega menu
  • Full-width mega panel
  • Grouped column mega menu
  • Featured link mega menu
  • Responsive accordion mega menu
  • Disclosure-button mega menu

Verification

Source trail checked:

Saved items