Do you want a mega menu in a vertical menu? A vertical mega menu keeps a long list of categories in a column and opens a rich panel under the one a visitor picks.
With the Navigation Menu widget from The Plus Addons for Elementor, the same mega menu you build for a horizontal menu also works in a vertical one.
To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — the Navigation Menu widget is part of The Plus Addons for Elementor Pro. The free Navigation Menu Lite widget does not have this option.
- Widget to enable: Navigation Menu, switched on under The Plus Addons > Widgets.
- A WordPress menu under Appearance > Menus, if you use the Default menu type.
Step 1: Build the mega menu
Create the Plus Mega Menu panels and the WordPress menu exactly as in how to create a mega menu.
Step 2: Pick the panel width
In Appearance > Menus, open each parent item and set Mega menu Type to Default, then save the menu and enter a Dropdown Max-Width(px) that fits next to your layout, such as 700.
In a Vertical Menu, Container and Full Width are measured from the page, not from the menu, so the panel can run past the edge of the screen. Default with a max-width is the safe choice.
Step 3: Show the menu vertically
Add the Navigation Menu widget to a sidebar, page or template. In Layout, keep Menu Type on Default. Menu Direction is a row of three pictures — Horizontal Menu, Vertical Menu and Vertical Side Menu, in that order. Hover over a picture to see its name. Choose the second one, Vertical Menu. In Content > Select Menu, pick your mega menu, then choose Menu Hover/Click and Menu Effects.
That’s it, now you’ll have a vertical mega menu.
How the Panel Opens
In a Vertical Menu, the panel opens under its menu item and pushes the items below it down, like an accordion.
If you want the panel to open beside the menu instead, use a Vertical Side Menu: see how to create a side mega menu.
Limitations
- Pro only. Plus Mega Menu comes with the Pro plugin.
- Only Slide Up/Down (JS) and Fade In/Out (JS) are used as Menu Effects in a Vertical Menu.
- One level of panels. Don’t put a mega menu inside another mega menu.
Troubleshooting
The panel runs off the screen
Set Mega menu Type to Default with a Dropdown Max-Width, or switch to Vertical Side Menu.
Only a plain link shows, no panel
The panel must be a published Plus Mega Menu item, placed as a sub item of the parent in Appearance > Menus.
