Navigation
Mega Menu
Mega menus dropdown menus that appear when users hover or click on a navigation option.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features7 checks
- Panel uses role="dialog" with an accessible aria-label
- Category sidebar is a <nav> landmark with aria-label
- Active category has aria-selected="true"
- All menu items are focusable anchor elements
- Panel closes on Escape key press
- Focus is trapped inside the panel while open
- Minimum 4.5:1 contrast for text and icons
When to use this component
✓Do's
- •The site has a wide, shallow structure with many categories to reveal at once
- •Users benefit from seeing the breadth of a section before committing to a click
- •Grouped links need headings, descriptions, or supporting imagery to be understood
- •A standard dropdown would need to scroll to show all of its options
✗Don'ts
- •The section has only a handful of links, a simple Dropdown Menu is lighter and faster
- •You are on a small screen, collapse to an accordion or drawer pattern instead
- •The panel would open on hover alone, it must also be reachable by keyboard and tap
- •You are using it to expose every page on the site, curate rather than exhaust
Do's and Don'ts
✓ Do's
Use Mega Menu for large navigation sets with 5 or more top-level sections. The sidebar + column layout prevents cognitive overload.
✗ Don'ts
Mega Menu with 2 categories
Contact
About
Don't use Mega Menu for fewer than 3 categories, a regular dropdown or simple nav links are far lighter and less intrusive.