Do you want to show your menu as a column instead of a row? A vertical menu works well in a sidebar, a service page or a narrow panel.
With the Navigation Menu widget from The Plus Addons for Elementor, you can turn any menu vertical with one setting.
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 plugin has a simpler widget, Navigation Menu Lite, which also has 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: Add the widget
Add the Navigation Menu widget where you want the menu — a sidebar, a page or a template. In Layout, choose the Menu Type.
Step 2: Choose Vertical Menu
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.
Step 3: Pick the menu and the dropdown behaviour
In Content, pick your menu (or add Repeater items). Then set Menu Hover/Click to open submenus on hover or on click, and choose Menu Effects.
A Vertical Menu only uses the Slide Up/Down (JS) and Fade In/Out (JS) effects. The other two fall back to Slide Up/Down.
Your menu now shows as a column.
Vertical Menu or Vertical Side Menu?
| Vertical Menu | Vertical Side Menu | |
|---|---|---|
| Layout | A plain column of items | A column with an optional title bar |
| Open and close the whole menu | No | Yes — on hover or click of the title bar |
| In the free Lite widget | Yes | No |
For the title bar version, see how to create a side menu.
Limitations
- One direction per widget. Use two widgets if you need both.
- It takes up space in the page. A vertical menu in normal page flow pushes content down. Put it in a narrow column or sidebar container.
- Parent indicators are off by default. Turn them on in Style > Main Menu > Main Menu Indicator Style.
Troubleshooting
I can’t find where to switch back to horizontal
It is the first picture in Content > Layout > Menu Direction. The pictures have no text; hover over them to see the names.
