Do you want to add a vertical menu to your Elementor website? If you have a small number of menu items, a vertical menu can add a distinctive layout to your site that works well for sidebars, service pages, and structured navigation panels.
With the Navigation Menu widget from The Plus Addons for Elementor, you can create a vertical menu on your Elementor website.
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 is installed and activated.
What It Does
The Navigation Menu widget’s Menu Direction setting includes a Vertical Menu option. Selecting it displays your menu items in a column instead of a horizontal row, so the same widget can build a sidebar-style menu instead of a top navigation bar.
Why It Matters
A horizontal menu is not always the right fit; sidebars, dashboards, service pages, and narrow left-panel layouts read better as a column of links. Building this from the Navigation Menu widget’s own Menu Direction control means you do not need a separate widget for vertical navigation.
What You Get
A column-aligned menu built from the same Content, Style, and Extra Options tabs as the widget’s horizontal menu, so submenu hover/click behavior, effects, and menu-item content stay consistent whichever direction you pick.
Benefits
- One widget builds both horizontal and vertical menus, no separate sidebar-menu add-on
- Submenu hover/click and effect settings carry over from the horizontal menu, so the learning curve is the same
- Works in any container, sidebar, header, or page template, not only the header builder
Capabilities
- Menu Type dropdown to select or build the source menu
- Menu Direction section with a Vertical Menu option (alongside Horizontal Menu)
- Content tab to select or create the actual menu, depending on the Menu Type chosen
- Submenu Hover Event dropdown to choose how submenu items open, on hover or on click
- Submenu Effect dropdown to choose a transition effect for the dropdown
- Main Menu Indicator Style control to add or remove a dropdown/arrow indicator on parent items
How It Works
Menu Direction is a layout switch: Horizontal renders the top-level items in a row with submenus dropping down, Vertical stacks the same top-level items in a column with submenus opening to the side or below, depending on the Submenu Hover Event and Submenu Effect settings. The underlying menu source (a WordPress menu, or the widget’s own Custom Repeater Menu) does not change based on direction, only how it is laid out and how its dropdowns behave.
How to Use It
This is a Pro feature. Upgrade to The Plus Addons for Elementor Pro for full functionality, plus 120+ other widgets.
To do this, add the Navigation Menu widget to the header, sidebar, or a page template and follow the steps below.
Note: To create the template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it.
1. From the Menu Type dropdown, select the appropriate option.
2. Select Vertical Menu from the Menu Direction section. This sets the navigation to display items in a column rather than a horizontal row. Use this when placing the menu in a sidebar or a narrow left-panel layout.
3. Select or create the menu from the Content tab, depending on the option you chose in the Menu Type dropdown.
From the Submenu Hover Event dropdown, select how submenu items open on hover or click. From the Submenu Effect dropdown, choose a transition effect for the dropdown. To build a full-width mega menu with additional columns and content blocks, see How to Create a Mega Menu in Elementor.
Your menu is now aligned vertically on the page.
Use Cases
- Blog and magazine sites that display category navigation in a left or right sidebar for quick topic access
- Portfolio and agency websites using a side-panel menu to separate navigation from page content
- Dashboard-style or membership sites that need a persistent vertical navigation column
Limitations
- Menu Direction is a widget-level setting; you cannot mix horizontal and vertical directions within one widget instance
- A vertical menu placed inline in the page flow pushes surrounding content down instead of overlaying it; overlaying the page requires a fixed/sticky container or an off-canvas layout instead
- By default, an open submenu does not stay expanded once you click a child item and navigate away; keeping a submenu visually expanded on the active page needs custom styling, it is not a built-in toggle
- Main Menu Indicator Style is a single style setting for all parent items; there is no per-item override from this control
Troubleshooting
- Menu only shows vertical, and I cannot find where to switch it back to horizontal. Confirmed via a real support ticket where a customer could not locate the Menu Direction/Vertical Menu controls: both live under the widget’s Layout tab, in the Menu Direction section, alongside the Menu Type dropdown, not in Content or Style.
- No dropdown arrow/indicator shows on vertical submenu items. Confirmed via a real support ticket about a missing submenu indicator on a vertical menu: check the Main Menu Indicator Style control is not set to None, and note that Style tabs for the main menu and sub menu indicator are separate controls.
- Submenu does not stay open/expanded after a child item is selected. Confirmed via a real support ticket asking for this behavior: this is expected, the widget does not persist an expanded state after navigation; it needs a custom active-state class or code, it is not a built-in setting.
- Vertical menu pushes the rest of the page down instead of sitting beside it. Confirmed via a real support ticket with the same symptom: a vertical menu placed directly in normal page flow behaves like a normal block; to keep the page layout beside it, place the widget in a fixed-width sidebar container or a sticky/fixed section instead of the main content flow.
Upgrade for Full Navigation Menu Power (Pro Only)
The Plus Addons for Elementor Pro includes advanced navigation controls that go beyond standard layouts. Build responsive mobile toggles, hover-triggered dropdowns, sidebar vertical menus, and multi-column mega menu designs, all within the Elementor editor.
Hover or Click Dropdown Control
Set submenus to open on hover or on click. Use hover-triggered dropdowns for desktop navigation and click-triggered dropdowns when building menus for touch devices or complex multi-level structures.
Custom Mega Menu & Repeater-Based Menus
Switch to Custom Repeater Menu to design mega menus with links, images, and custom content using the Elementor editor. For a step-by-step walkthrough, see How to Create a Hamburger Mobile Menu with Elementor Template.
Also read how to create a side menu in Elementor.
