UX Patterns Guide
UI + UX Navigation And Wayfinding standard

Mega menu

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.

Open in lab Compare alternatives
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.
  • The team cannot support keyboard, focus, hover, and mobile behavior correctly.
  • Users need persistent local context after choosing a destination; side navigation may be better there.

Problem it prevents

Users on large sites or products need to understand and choose among many related destinations without drilling through multiple pages or being overwhelmed by an unstructured site map.

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.

Recovery path

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 user opens Products, scans grouped links, selects Data pipeline, and the panel closes while the destination becomes the current section.
  • A keyboard user opens the panel with Enter, moves through visible links, presses Escape, and focus returns to the Products trigger.
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.
  • The panel appears only on hover, closes while the pointer crosses a gap, and forces the user to restart navigation.
  • A user expects the Products trigger to navigate to a landing page, but it only opens a panel with no fallback link.
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.
  • 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.

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?
Interactive lab

Inspect the states before you copy the pattern

Open a grouped navigation panel

Open the Products panel, choose a grouped destination, dismiss it, and compare desktop groups with the mobile fallback.

Mega menu
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

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

Keyboard / Access

Tab reaches each top-level trigger in order without entering closed panels.

Avoid Generating

Using a mega menu as a complete site map.
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

Last verified: