Mega menu
A mega menu is a wide panel that drops from the main navigation and shows a whole section of a site as grouped links.
- Also called
- navigation menu, flyout menu
- Platforms
- Web
- In the gallery
- 50 web designs
Mega menus from the Kombai gallery: an AI image tool's studio menu, a payments app's personal menu and a recipe site's dishes menu.
What is a mega menu?
A mega menu is a large panel that opens under a top-level link in the navbar. Instead of one short list, it lays out a whole section of the site in columns, with headings, links, short descriptions and sometimes a picture or a promotion. People see the shape of the section at a glance and go straight to the page they want.
- Links are grouped under headings, so a long list stays easy to scan.
- The panel usually spans the width of the page or the content area, under the navbar.
Mega menus show up across navbar, header, shop and storefront and home screens.
When to use a mega menu
- Large catalogsStores with many departments and categories under each one.
- Many products or featuresSoftware sites where each product needs a name and a line of explanation.
- Deep resource sectionsLibraries, guides and docs that people browse by topic.
When not to use one
- A few links per sectionA plain dropdown menu or direct links in the navbar are quicker.
- On phonesThere is no room for columns. Use a drawer or an accordion of sections instead.
- Inside an appUse side navigation or a command palette for moving around an app.
Anatomy of a mega menu
This one works. Press Products or Resources to open its panel, Tab through the links and press Escape to close it.
- Closed
- Open
- Keyboard focus
- TriggerA navbar button that opens the panel
- PanelWide, under the navbar
- Group headingNames each column
- LinkName with a short description
- Featured areaA promo or picture
- StatesClosed, open, focus
Mega menu variants
We sorted every mega menu design in the Kombai gallery and found five patterns. Browse all 50 web designs.
1. Multi-column link lists
Retail menus with a column per category and plain text links, often six columns wide.
2. Icons with descriptions
Software menus where each product gets an icon, a name and one line on what it does.
3. Links beside a featured panel
Link groups on one side and a picture, article or offer on the other.
4. Category rail with a detail pane
A list of categories down the left; hovering or focusing one fills the right side with its links.
5. Visual tiles
Product pictures or drawings as the links themselves, for vehicles, supplements and other physical products.
Where mega menus show up
Retail and department stores
Departments, sale edits and brand lists for shoppers who browse by category.
Software and platform sites
Product suites and platform features, grouped by job, with a demo or sign-up link close by.
Resource libraries and travel
Guides, topics, articles and destinations, often with the newest pieces shown in the panel.
Mega menu vs similar components
Build notes
- Make each top-level item a <button> with aria-expanded and aria-controls, inside a <nav> with an aria-label.
- Treat the panel as a disclosure of ordinary links. Skip role="menu", which asks for arrow-key behavior people do not expect on a website.
- Open on click or Enter, and if it also opens on hover, add a short delay so the pointer can cross to the panel without it closing.
- Escape closes the panel and returns focus to its button, and a panel that opened on hover stays open while the pointer is over it.
- Keep the tab order simple: button, then the panel links in reading order, then the next navbar item.
- On small screens, turn the panel into a drawer or an accordion of sections.
FAQ
What's the difference between a mega menu and a dropdown menu?
A dropdown menu is a short, single list. A mega menu is a wide panel with several columns, headings and often pictures, used when a section has too many links for one list.
Should a mega menu open on hover or on click?
Always on click, and on Enter or Space from the keyboard. Hover can be added for mouse users, with a short delay to open and to close, so the panel does not flash open while the pointer passes over the navbar.
How many links can a mega menu hold?
As many as people can scan, which depends on grouping more than count. Give each column a clear heading, keep link names short and link to a full category page for everything else.
What happens to a mega menu on mobile?
It usually moves into a menu drawer, where each top-level item expands like an accordion or slides to its own list of links.
Related terms
All glossary terms · Browse 50 web mega menu designs