--- title: "Mega menu UI: anatomy, variants and examples | Kombai" description: "A mega menu is a wide panel that drops from the main navigation and shows a whole section of a site as grouped links." canonical_url: https://kombai.com/glossary/mega-menu/ author: "The Kombai Team" --- # 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 Kombai gallery: [50 web designs](https://kombai.com/gallery/web/mega-menu/) - [Ridgelume](https://kombai.com/gallery/inspirations/mega-menu-web-10/) (Web) - [Fenlock](https://kombai.com/gallery/inspirations/mega-menu-web-48/) (Web) - [Saltkeel](https://kombai.com/gallery/inspirations/mega-menu-web-5/) (Web) ## 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. ## When to use mega menu - **Large catalogs.** Stores with many departments and categories under each one. - **Many products or features.** Software sites where each product needs a name and a line of explanation. - **Deep resource sections.** Libraries, guides and docs that people browse by topic. ## When not to use one - **A few links per section.** A plain dropdown menu or direct links in the navbar are quicker. - **On phones.** There is no room for columns. Use a drawer or an accordion of sections instead. - **Inside an app.** Use side navigation or a command palette for moving around an app. ## Anatomy 1. **Trigger**: A navbar button that opens the panel 2. **Panel**: Wide, under the navbar 3. **Group heading**: Names each column 4. **Link**: Name with a short description 5. **Featured area**: A promo or picture 6. **States**: Closed, open, focus ## Variants We sorted every mega menu design in the Kombai gallery and found five patterns. ### 1. Multi-column link lists Retail menus with a column per category and plain text links, often six columns wide. - [Havlund](https://kombai.com/gallery/inspirations/mega-menu-web-2/) (Web) - [Felsic](https://kombai.com/gallery/inspirations/mega-menu-web-3/) (Web) - [Maddra](https://kombai.com/gallery/inspirations/mega-menu-web-50/) (Web) ### 2. Icons with descriptions Software menus where each product gets an icon, a name and one line on what it does. - [Epheris](https://kombai.com/gallery/inspirations/mega-menu-web-25/) (Web) - [Kelvora](https://kombai.com/gallery/inspirations/mega-menu-web-31/) (Web) - [Skavla](https://kombai.com/gallery/inspirations/mega-menu-web-39/) (Web) ### 3. Links beside a featured panel Link groups on one side and a picture, article or offer on the other. - [sorrelway](https://kombai.com/gallery/inspirations/mega-menu-web-16/) (Web) - [Thermalane](https://kombai.com/gallery/inspirations/mega-menu-web-22/) (Web) - [Balsamere Workplace](https://kombai.com/gallery/inspirations/mega-menu-web-49/) (Web) ### 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. - [Harbourwick](https://kombai.com/gallery/inspirations/mega-menu-web-6/) (Web) - [Corrievale](https://kombai.com/gallery/inspirations/mega-menu-web-8/) (Web) - [Galehurst](https://kombai.com/gallery/inspirations/mega-menu-web-29/) (Web) ### 5. Visual tiles Product pictures or drawings as the links themselves, for vehicles, supplements and other physical products. - [Norveth](https://kombai.com/gallery/inspirations/mega-menu-web-35/) (Web) - [Waypost](https://kombai.com/gallery/inspirations/mega-menu-web-21/) (Web) - [Orrera](https://kombai.com/gallery/inspirations/mega-menu-web-24/) (Web) ## Where mega menus show up ### Retail and department stores Departments, sale edits and brand lists for shoppers who browse by category. - [Loxwell](https://kombai.com/gallery/inspirations/mega-menu-web-20/) (Web) - [Mistvane](https://kombai.com/gallery/inspirations/mega-menu-web-33/) (Web) - [Tansmoor Goods](https://kombai.com/gallery/inspirations/mega-menu-web-17/) (Web) ### Software and platform sites Product suites and platform features, grouped by job, with a demo or sign-up link close by. - [Weftmoor](https://kombai.com/gallery/inspirations/mega-menu-web-12/) (Web) - [Quillspan](https://kombai.com/gallery/inspirations/mega-menu-web-13/) (Web) - [Bindstone](https://kombai.com/gallery/inspirations/mega-menu-web-27/) (Web) ### Resource libraries and travel Guides, topics, articles and destinations, often with the newest pieces shown in the panel. - [Halovane](https://kombai.com/gallery/inspirations/mega-menu-web-30/) (Web) - [Brinecast](https://kombai.com/gallery/inspirations/mega-menu-web-41/) (Web) - [Tidereach](https://kombai.com/gallery/inspirations/mega-menu-web-47/) (Web) ## Mega menu vs similar components | | [Mega menu](https://kombai.com/glossary/mega-menu/) | [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) | [Side navigation](https://kombai.com/glossary/side-navigation/) | |---|---|---|---| | Holds | A whole section in grouped columns | A short list of actions or links | Every area of an app | | Opens from | A top-level navbar link | A button | Always visible along the edge | | Best for | Large marketing sites and stores | A few choices in context | Moving around inside an app | ## Build notes - Make each top-level item a