Mega Menus

What is a mega menu?

A mega menu is a large dropdown panel that opens from a navbar item and shows many links at once, arranged in several columns. It can include headings, icons, short descriptions, featured images or a promotional block. Mega menus are common on e-commerce stores, news sites, universities and SaaS companies with many products or resources.

When to use a mega menu

Use one when a top-level section has too many destinations for a normal dropdown, and when grouping them visually helps people find the right page. If a section only has a handful of links, a simple dropdown is clearer. Keep the number of top-level triggers small and the groups inside each panel logical, with clear headings.

Mega menu best practices

• Use <button> triggers with aria-expanded and aria-controls for each panel; avoid opening menus on hover alone.
• If you do support hover, add a short delay so menus do not flicker when the pointer crosses them.
• Make every link reachable with Tab, close the panel with Escape and return focus to its trigger.
• Use headings and lists inside the panel so screen reader users can understand the structure.
• Keep panels within the viewport and avoid content that requires scrolling inside the menu.
• On mobile, convert the mega menu into an accordion-style list inside the mobile menu instead of shrinking the columns.
• Lazy-load any images in the panel so they do not slow down the first page load.

Bootstrap, Tailwind and pure CSS mega menus

The mega menu examples here come in Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS versions. Bootstrap 5 mega menus build on the dropdown plugin with grid columns inside the menu; Bootstrap 6 alpha versions use its ES module JavaScript and theme-* colour roles. Tailwind and pure CSS versions show a responsive mega menu in plain HTML and CSS with a small script. Filter by framework, open the live preview to test desktop and mobile behaviour, then copy the code or download it and fill in your own categories.