Mega menu design: when a site needs one, and how to build it well
A mega menu, a large panel that shows a whole section's links at once, earns its place on sites with dozens of destinations in a few clear groups: shops, universities, councils, publishers. Small sites don't need one. If you build one, group links by how visitors think, open it on click or a deliberate hover, make it work with a keyboard, and give phones a different pattern entirely.
When a site needs a mega menu
The test is the number and shape of destinations. A site with eight pages can show them all in the header. A shop with forty categories, a university with hundreds of courses or a council with dozens of services can't, and a plain dropdown that scrolls forty items is worse than a panel that shows them grouped. Nielsen Norman Group's guidance on mega menus, by Jakob Nielsen and Angie Li, makes the case for large two-dimensional panels where every option is visible without scrolling, structured with type and spacing.
| Destinations | Pattern |
|---|---|
| Up to about 7 | Links shown in the header |
| 8 to 20 in a few groups | Header links with simple dropdowns, or a short secondary navigation on each section page |
| 20 to a few hundred in clear groups | A mega menu |
| Thousands, or no clear groups | Search first, with category pages and filters; the menu shows only the top level |
Grouping and labelling
- Group by how visitors think, not by your org chart. Card sorting with real customers is the reliable way to find the groups.
- Keep groups a medium size. Groups of a handful to a dozen links scan well; one link per group or thirty per group don't.
- Label with front-loaded words. "Bathroom tiles" is easier to scan than "Tiles for your bathroom". Sibling labels should be clearly different.
- Show each link once. The same destination under two headings makes people wonder whether they're different.
- Put the most important group first, usually top left, and order the rest by importance or workflow.
- Keep search visible outside the menu rather than tucked inside it.
Hover, click and timing
Menus that open the instant a pointer touches them flicker as people move across the header on the way to something else. The NN/g guidance suggests waiting about half a second of pointer rest before opening a hover menu, then showing it quickly, and keeping it open for about half a second after the pointer leaves, so a slightly diagonal path to a link doesn't close the panel. Opening on click avoids the timing problem entirely and works the same with mouse, touch and keyboard, which is why many sites now use click for large panels.
If content appears on hover or focus, WCAG's Content on Hover or Focus criterion (level AA) applies: the panel must be dismissible without moving the pointer, usually with Escape; the pointer must be able to move onto the panel without it vanishing; and it must stay until the visitor moves away or dismisses it.
Mega menu UX for keyboards and screen readers
The W3C's disclosure navigation example is the model to follow, scaled up. Each top-level item is a button with aria-expanded, the panel is a set of headed lists of links inside the nav landmark, and the menu role isn't used, because site navigation doesn't need the application-style keyboard behaviour that role promises.
- Tab moves through top-level buttons and into an open panel's links in reading order.
- Enter or Space opens and closes a panel; Escape closes it and returns focus to its button.
- Moving focus out of the navigation closes the panel.
- Each group has a visible heading, which also helps screen reader users skim the panel.
- Each top-level item should also lead to a real page listing the same links, as a fallback that works everywhere.
The mobile version
A large dropdown menu doesn't translate to a phone. The usual pattern is a menu button that opens a list of top-level sections, each expanding in place to show its groups, or leading to a section page. Keep the expanded levels to two. See hamburger menu best practices and website navigation design.
Mega menus in Anticode
Anticode's sites are small enough that they rarely need one. A design-engine site can have up to eight separate pages (Work, Shop, Services, About, Pricing, FAQ, Book and Contact) besides the home page, and they're shown as plain links in the header. Design-engine pages run no scripts, so any menu on them has to work with HTML and CSS alone, and Anticode doesn't build dropdown or mega menus on them.
If your site has grown past what a header can show, that's usually a sign it needs a different structure: section pages that list their own links, CMS collections for repeated content, or a move to the Next.js export, where you can build any navigation you need in code.
Questions people ask
When does a website need a mega menu?
When it has dozens of destinations in a few clear groups that people need to browse. Below about twenty destinations, simpler navigation works better.
Should a mega menu open on hover or click?
Click is simpler and works the same for mouse, touch and keyboard. If you use hover, add a short delay before opening and closing.
How do you make a mega menu accessible?
Use buttons with aria-expanded, headed lists of links inside a nav landmark, Escape to close, and a real page behind each top-level item.