If you have a large website with many pages or an e-commerce site, a mega menu gives visitors a structured overview of all your navigation options in one view. A mega menu is a drop-down panel that displays multiple links, submenus, and visual elements in a multi-column layout.
What It Does
The Navigation Menu widget in The Plus Addons for Elementor lets you create a mega menu in Elementor without a separate plugin, by pairing Elementor-built Plus Mega Menu templates with a standard WordPress menu.
To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, click here.
Why It Matters
A standard dropdown menu forces visitors to click through one link at a time to find what they need. A mega menu surfaces an entire section’s structure, categories, featured links, even images, in one panel, which shortens the path to any page on a large site and is the standard pattern for big e-commerce catalogs.
What You Get
- A fully Elementor-built dropdown panel per top-level menu item, styled like any other Elementor template
- Default, Container, and Full Width panel sizing, set per menu item
- Per-item label color and background color to flag items like “Sale” or “New”
Benefits
- Large e-commerce sites with product categories and subcategories in the navigation
- Agency or service websites with multi-level service hierarchies
- SaaS platforms with feature-rich navigation across multiple product areas
Capabilities
- Plus Mega Menu custom post type, one Elementor-built template per top-level menu item
- Per menu item (Appearance > Menus, Custom Links): Label Color, Label Bg Color, Icon Type, and Mega menu Type (Default, Container, Full Width)
- Works with both Horizontal Menu and Vertical Menu directions on the Navigation Menu widget
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it is installed and activated to enjoy all its powers.
How It Works
A Plus Mega Menu entry is its own Elementor-editable template, one per top-level dropdown. A standard WordPress menu (Appearance > Menus) then assembles those templates under Custom Link parent items, and the Label Color, Label Bg Color, Icon Type, and Mega menu Type fields on that same Custom Link item control how the panel looks and sizes once it opens. This is a separate mechanism from the in-editor Repeater Menu content type used elsewhere on this site, both can build a mega menu, but through different controls.
How to Use It
Create Elementor Templates for Mega Menu
To create the mega menu using the Navigation Menu widget, create an Elementor template for each top-level menu item.
After you enable the Navigation Menu widget, the Plus Mega Menu option will appear in the Dashboard.
To create a mega menu item, follow the steps –
1. Go to Plus Mega Menu > Add New.
2. Add a name to the template and click Publish.
3. Click the Edit with Elementor button, build the menu content using Elementor widgets, and click Update to save.
Also Read: 5 best Elementor mega menu plugins.
Repeat this process for all the top-level menu items you want in your mega menu.
Elementor Editor Error
Some users may see an error in the Elementor editor when opening the menu item.
If you see this error, click Go Back. Go to Settings > Permalinks and reset the permalinks. To do this, select Plain from the Permalink structure options and click Save Changes. Then select your previous permalink option again and click Save Changes.
Your permalink is now reset. Open the Plus Mega Menu item in Elementor to continue editing.
Create the Menu
After creating all the mega menu templates, create a WordPress menu to assemble them.
1. Go to Appearance > Menus.
2. Click the create a new menu link, add a name, and click Create Menu.
3. Click Screen Options at the top and check the Plus Mega Menu option. All the templates you created will appear under the Plus Mega Menu tab.
4. Select the items you want to add to the menu and click Add to Menu.
5. Add a parent item for each mega menu item using the Custom Links option. This keeps the mega menu items closed by default.
Note: You can also make the mega menu fullwidth by selecting Full Width from the Mega menu Type dropdown in the parent menu item.
Also Read: how to create a sticky menu in Elementor.
Drag and drop to place the mega menu items under their corresponding custom link parent items.
Open any custom link menu item to access additional mega menu options. Make these adjustments on custom link items only, as the settings affect all child mega menu items beneath them.
Label Color – Set a color for the text label on this menu item. Use this to distinguish promotional items like “Sale” or “New” from regular navigation entries.
Label Bg Color – Set a background color behind the label text. Use this to make a specific menu item stand out visually.
Icon Type – Add an icon or image next to the menu item label. This helps visitors identify a category at a glance.
Mega menu Type – Set the container width for the dropdown panel of this menu item. Options are Default, Container, and Full Width. Use Full Width when you want the dropdown to span the entire viewport, such as on a WooCommerce store navigation.
With Default width selected, additional options appear to set a custom pixel width and content alignment for the dropdown panel.
5. Click Save Menu to save the menu.
Add the Menu
To do this, add the Navigation Menu widget to the header template and follow the steps –
Note: To create the header template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it.
1. Select Default from the Menu Type dropdown.
2. Select an appropriate option from the Menu Direction section. Select Horizontal Menu for a standard top navigation bar.
3. From the Select Menu dropdown in the Content tab, select your mega menu.
From the widget settings, select the appropriate submenu hover event and effect.
The mega menu is now set up and ready to use on your site.
Use Cases
- Large e-commerce sites with product categories and subcategories in the navigation
- Agency or service websites with multi-level service hierarchies
- SaaS platforms with feature-rich navigation across multiple product areas
Limitations
- Each Plus Mega Menu template must be built individually in Elementor; there is no bulk-copy of one panel’s layout to another template
- Label Color, Label Bg Color, Icon Type, and Mega menu Type only apply to the Custom Link parent item, not to the mega menu template’s own content
- A mega menu nested inside another mega menu is not supported and can break the panel’s positioning
Troubleshooting
- Plus Mega Menu template stays stuck on a loading screen when clicking Edit – a real reported case; this is the same class of issue as the documented Elementor Editor Error above, resetting permalinks (Settings > Permalinks, switch to Plain then back) resolves most cases.
- Full Width mega menu appears smaller than expected after publishing – a real reported case; confirm Mega menu Type is actually set to Full Width on the Custom Link parent item, not Default or Container, and clear any page cache after the change.
- Dropdown panel does not resize or stay centered when the browser window changes size – a real reported case; verify the issue on the live page at the actual breakpoint rather than only the Elementor editor preview.
Also, read how to create a side mega menu in Elementor.
