A vertical menu stacks your links one under another instead of laying them across a bar. It suits a sidebar, a documentation page or a compact site where a wide header would waste space.
The free Navigation Menu Lite widget in The Plus Addons for Elementor does this with one control, Menu Direction, using a menu you already manage under Appearance > Menus.
To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu Lite 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: Free — Navigation Menu Lite is part of the free The Plus Addons for Elementor plugin. Every setting described here, including Menu Content > Template Menu, works without the Pro plugin; this was checked with Pro deactivated.
- Not the same widget as Navigation Menu: Navigation Menu is a separate widget in The Plus Addons for Elementor Pro. It is the one with mega menus, a sticky header menu, off-canvas and swiper mobile menus and per-item icons and labels. Navigation Menu Lite has none of those. If the panel header says Edit Navigation Menu Lite, this is the free widget. The LIVE WIDGET button above opens the Pro Navigation Menu demo, since the Lite widget has no demo page of its own.
- Widget to enable: TP Navigation Menu Lite, switched on under The Plus Addons > Widgets. In the Elementor panel it appears as Navigation Menu Lite.
- You need a WordPress menu: build it first under Appearance > Menus. The widget does not hold menu items of its own, it renders a menu you have already created. On a block theme (such as Twenty Twenty-Five) WordPress hides Appearance > Menus; open /wp-admin/nav-menus.php directly, or use a classic theme, or build the menu in the Site Editor instead.
Steps
- Add the Navigation Menu Lite widget wherever the vertical menu should sit — a sidebar container, a narrow column, or a header template.
- In the Navigation Bar section, leave Menu Type on Default and pick your menu in Select Menu.
- In Menu Direction, click the right-hand picture. Menu Direction is a picture control with two choices and no text labels: the left picture is Horizontal Menu, the right picture is Vertical Menu. The picture you pick is outlined.
- Set Alignment to Left. It defaults to Center, which centres every item in the column and rarely looks right in a sidebar.
- Update the page. The items now stack, and parent items still open their submenu on hover or on click.
Settings Used Here
| Setting | Where | What it does | Default |
|---|---|---|---|
| Menu Direction | Content > Navigation Bar | Two pictures: left is a horizontal row, right is a vertical stack. | Horizontal Menu |
| Select Menu | Content > Navigation Bar | The WordPress menu the widget renders. | none |
| Alignment | Content > Navigation Bar | Left, centre or right inside the container. | Center |
| Sub Menu Width | Style > Sub Menu | Width of the dropdown panel, which matters more in a narrow sidebar than in a header. | — |
How It Behaves
- The widget does not rebuild your menu. It renders whatever is in the menu you chose, so editing it under Appearance > Menus updates every place it is used.
- Submenus still work in vertical mode. Both Hover Sub-Menu and Click Sub-Menu behave the same as in a horizontal bar.
- The dropdown panel opens near the left edge of its parent item rather than beside it.
- Responsive Mobile Menu still applies. Below the width set in Open Mobile Menu the vertical list is replaced by the hamburger toggle like any other layout.
Limitations
- There is no vertical side panel that slides in from the edge of the screen. That layout belongs to the Pro Navigation Menu widget.
- Submenu items do not stay expanded when a visitor is on the page one of them points to.
- Menu items cannot carry icons, images or badges in Default mode.
- There is no setting to make the vertical menu stick as the page scrolls; use Elementor’s own sticky option on the container that holds it.
Troubleshooting
The items are still in a row
Menu Direction has no text labels, so it is easy to click the wrong picture. The selected picture is the outlined one, and the vertical layout is the right-hand picture. The editor preview updates immediately.
The stacked items are centred and look uneven
Alignment is Center by default. Set it to Left.
The dropdown panel overflows a narrow sidebar
Reduce Sub Menu Width under Style > Sub Menu, or give the container holding the widget more room.
No arrow shows on items with a submenu
Set Main Menu Indicator Style to Style 1 under Style > Main Menu. It is None by default.
