---
title: "How to Create a Vertical Navigation Menu in Elementor for Free?"
url: https://theplusaddons.com/docs/create-a-vertical-navigation-menu-in-elementor-for-free/
date: 2023-10-27
modified: 2026-09-16
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Vertical-Navigation-Menu-in-Elementor-for-Free_-1024x536.jpg
word_count: 801
---

# How to Create a Vertical Navigation Menu in Elementor for Free?

## 

- Navigation Menu Lite en The Plus Addons for Elementor crea un menú vertical con un solo control, Menu Direction, y usa un menú ya gestionado en Appearance > Menus.
- The Plus Addons for Elementor Navigation Menu Lite pertenece a la edición Free y funciona con Pro desactivado, incluido Menu Content > Template Menu.
- Menu Direction muestra dos imágenes sin etiquetas de texto: la imagen derecha activa Vertical Menu y la izquierda activa Horizontal Menu.
- Submenus siguen funcionando en modo vertical, pero el panel desplegable se abre cerca del borde izquierdo del elemento padre y el menú móvil responsive sigue sustituyéndolo por el icono hamburguesa bajo el ancho configurado.

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](https://theplusaddons.com/docs/navigation-menu-lite-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/navigation-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

Table Of Contents

## 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.

![Navigation Menu Lite in the Elementor editor with the second Menu Direction picture selected and the canvas showing Home, Services, Shop, About and Contact stacked](https://theplusaddons.com/wp-content/uploads/2026/09/navmenulite-vertical.webp)

- 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.

![A vertical navigation menu stacked down the side of a published page](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-vertical-menu-demo.png)

## 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](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/) 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.

## Related Docs

- [Navigation Menu Lite Widget Settings Overview](https://theplusaddons.com/docs/navigation-menu-lite-widget-settings-overview/)- [How to Create an Elementor Hamburger Toggle Menu for Mobile for Free?](https://theplusaddons.com/docs/create-an-elementor-hamburger-toggle-menu-for-mobile-for-free/)- [How to Open Elementor Submenu Dropdown on Hover for Free?](https://theplusaddons.com/docs/open-elementor-submenu-dropdown-on-hover-for-free/)

## Frequently Asked Questions

**Q: What do I need before creating a vertical navigation menu in Elementor for free?**
A: A WordPress menu already built under Appearance > Menus is the key requirement, because the Navigation Menu Lite widget renders an existing menu instead of storing items itself. The free widget is part of The Plus Addons for Elementor, so TP Navigation Menu Lite must be switched on under The Plus Addons > Widgets. On block themes like Twenty Twenty-Five, WordPress hides Appearance > Menus, so /wp-admin/nav-menus.php or the Site Editor is the practical workaround.

**Q: How do I make a menu stack vertically instead of staying in a row?**
A: Menu Direction controls the layout, and the vertical option is the right-hand picture in that two-choice control. The selected picture is outlined, which matters because the labels are visual only and it is easy to click the horizontal option by mistake. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses this single control to turn a normal WordPress menu into a stacked sidebar-style list.

**Q: Why are my vertical menu items centered and uneven in a sidebar?**
A: Alignment is usually the reason. It defaults to Center, which pushes every item into the middle of the column and looks awkward in narrow sidebars. Set Alignment to Left so the stack reads cleanly from top to bottom. That small change matters because vertical menus are usually used in compact layouts where centered items waste space and make submenu relationships harder to scan.

**Q: Does a vertical menu still support submenu dropdowns?**
A: Submenus still work in vertical mode, and both Hover Sub-Menu and Click Sub-Menu behave the same way they do in a horizontal bar. The dropdown panel opens near the left edge of its parent item rather than beside it, which is why submenu width becomes more important in sidebars than in headers. Editing the WordPress menu under Appearance > Menus updates every place this widget is used.

**Q: What should I change if the dropdown panel overflows a narrow sidebar?**
A: Sub Menu Width under Style > Sub Menu is the setting that matters here. Narrow sidebars leave less room for dropdown panels, so reducing that width keeps the submenu inside the container instead of spilling out visually. If space is still tight, giving the widget’s container more room is the other practical fix mentioned on the page.

**Q: Why is there no arrow on menu items with submenus?**
A: Main Menu Indicator Style controls that arrow, and it defaults to None. Switching it to Style 1 under Style > Main Menu adds an indicator so visitors can tell which items open submenus. That detail matters in vertical navigation because stacked links can look flat without a visual cue, especially when you are using a sidebar or compact layout.