Mega menu

Put every page a visitor might want one click from the header, grouped the way your customers think about them.

Also called

Max Mega MenuUberMenumega dropdownElementor mega menuWP Mega Menumega navigation

What it replaces

• Max Mega Menu
• UberMenu
• WP Mega Menu
• Elementor Pro’s mega menu (Menu widget)
• Divi and Astra “mega menu” header options

Accessibility

Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.

• Click is the contract, not hover: a top item with a panel is a button with `aria-expanded` and `aria-controls`, toggled by click, Enter or Space. Hover opens it after 150 ms as a courtesy, and a click on a hover-opened panel keeps it open.
• Escape closes the panel and returns focus to its button; focus leaving the panel closes it; a click outside closes it. One panel is open at a time.
• ← → move across the top items (↑ ↓ in the mobile list), Home and End jump to the ends, ↓ on a top button opens its panel and moves into it.
• Without JavaScript every top item is a plain link and a panel shows on hover or when focus is inside it, so every link is reachable.
• Below `breakpoint` the list sits behind a “Menu” disclosure button (`aria-expanded`), and panels become an accordion in the same order.
• No layout shift when the script runs. Below `breakpoint`, a browser that runs scripts paints the menu collapsed from the first frame (CSS `@media (scripting: enabled)` at the script’s own threshold), so the page under the header does not jump; the Menu button shows from that frame and opens the list once the script, which follows the nav, has run. Without JavaScript the full list shows and there is no Menu button. A browser without the `scripting` media feature shows the full list until the script collapses it. Above `breakpoint` a link and the button that replaces it are the same width.
• The current page is marked on the top item as well as in its panel: once the item is a button, the button carries `aria-current="page"`.
• A panel taller than the viewport below it scrolls inside itself (focus scrolls it too), so no link falls out of reach under a sticky header; the wheel stops at its end rather than scrolling the page behind.
• Column headings label their lists (`aria-labelledby`) rather than adding headings to the page outline. prefers-reduced-motion removes the panel’s fade.

Where it's live

• superherotech.ai: /elements/mega-menu/ (demo)

How to ask for it

“The mega-menu on our home page, with …”

Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.

More elements you can ask for: Before / After, Particle field, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.