How to Add a Mega Menu in Elementor
These mega menus are built on the Elementor Pro Menu widget with the dropdown panes prebuilt: link columns, promo cards, icon grids. Our import tests confirmed the nested dropdown content survives export and import intact, so a mega menu ships as one normal template you place inside a header.
- 1
Download and import the template
Click Download JSON on the component page, then import it via Templates, then Saved Templates, then Import Templates.
- 2
Place it in your header
Edit your header template (Theme Builder) or the page where the menu lives, open the Saved tab in the Elementor library, and drag the imported template in, or copy-paste the menu widget from the imported template into your header.
- 3
Bind your own items and links
Select the Menu widget: each top-level item is edited in the Menu Items list (title and optional direct link), and each dropdown pane is a normal Elementor container you edit in place: swap the link lists, promo images, and buttons for your own destinations.
Troubleshooting
A dropdown pane is empty or missing
Every item with dropdown content has Content toggled ON in its Menu Items entry. If you add a new item, enable its Content toggle to get a pane to design.
The dropdown opens on click but I want hover
Select the Menu widget and switch Open On from Click to Hover in the Layout settings (our templates ship with Hover).
The menu collapses to a hamburger on desktop
Check the widget's Breakpoint setting: it controls when the menu switches to the mobile toggle. Set it to Tablet to keep the full menu on desktop.
Browse every template this guide covers:
Mega Menus →