Are you looking to create a side menu in Elementor? A side menu is a navigation menu that appears on the side of the page, giving visitors quick access to different sections or categories of your site. This type of menu works especially well on e-commerce sites or large content sites with many post categories.
With the Navigation Menu widget in The Plus Addons for Elementor, you can add a vertical sidebar menu or sidebar toggle menu directly in the Elementor editor.
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 its installed & activated to enjoy all its powers.
What It Does
The Navigation Menu widget’s Menu Direction: Vertical SideMenu option renders the menu as a vertical column instead of a horizontal bar, with an optional collapsible title bar that shows or hides the menu on hover or click.
Why It Matters
Sites with deep category structures or many navigation items run out of horizontal header space fast. A vertical side menu keeps every link reachable without a horizontal scroll or an overcrowded top bar, and works as a permanent sidebar or an on-demand toggle panel.
What You Get
- A Vertical SideMenu direction option, alongside the widget’s horizontal and mega menu layouts
- A Vertical Side Title Bar toggle that adds a collapsible header for the side menu
- A Title Bar Hover/Click control with Normal, Hover, and Click behaviors for opening the collapsed panel
- Prefix Icon and Postfix Icon controls, plus editable Title and Title Link fields, for the toggle bar itself
Benefits
- Same widget used for the desktop horizontal menu, so there is no separate sidebar-menu plugin to manage
- The collapsible title bar means a side menu does not have to occupy screen space permanently – it can open on click only
- Submenu open direction and hover/click behavior are configurable, so nested categories stay usable in a narrow vertical layout
Capabilities
This is a Menu Direction setting on the widget’s Layout tab. Selecting Vertical SideMenu exposes the Open Direction control for submenu behavior on the Content tab, plus the Vertical Side Title Bar toggle and its Title Bar Hover/Click, Title, Title Link, Prefix Icon, and Postfix Icon sub-controls.
How It Works
Add the Navigation Menu widget to the 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.
How to Use It
1. From the Menu Type dropdown, select the appropriate option for your navigation source.
2. Then select Vertical SideMenu from the Menu Direction section. This sets the menu to display vertically along the side of the page.
3. From the Content tab, choose the submenu open direction from the Open Direction dropdown. Use this when your menu has nested items and you need to control which direction the submenu expands.
4. Finally, select or create the menu depending on the option selected in the Menu Type dropdown.
From the available options, select the appropriate submenu hover event and effect.
By enabling the Vertical Side Title Bar toggle, you add a collapsible toggle bar for the menu. This is useful when you want the side menu to remain hidden by default and only open when the visitor clicks or hovers over the toggle.
Did you know? You can create a menu with repeater in Elementor.
From the Title Bar Hover/Click dropdown, set the behavior that opens the toggle menu. You will find three options –
- Normal – To always show the menu.
- Hover – To show the menu on hover.
- Click – To show the menu on click. Use this when you want visitors to intentionally open the side menu rather than having it appear automatically.
In the Title field, change the toggle bar title text. In the Title Link field, add a URL to make the toggle bar title clickable.
From the Prefix Icon and Postfix Icon sections, change the icons that appear on the toggle bar before and after the title.
For advanced multi-column navigation panels, see how to create a mega menu in Elementor as another layout option with the Navigation Menu widget.
Now you will see a sidebar menu on your page.
Use Cases
- E-commerce sites with multiple product categories that need persistent sidebar navigation
- Large content websites or blogs with many post categories
- Service or portfolio sites using full-page or scrolling layouts
Limitations
- The Vertical Side Title Bar only exists when Menu Direction is set to Vertical SideMenu – it is not available on horizontal or mega menu layouts
- Title Bar Hover/Click: Normal keeps the panel permanently open, which uses vertical page space; on content-heavy pages this can push content down noticeably compared to Hover or Click
- The submenu Open Direction is a single setting per widget instance, so all nested items expand the same way – you cannot mix left-opening and right-opening submenus in one side menu
Troubleshooting
- Toggle title bar does not open the menu on tap/click – a real support case (ticket #3106) reported the Navigation Menu widget’s mobile/toggle interaction not responding, traced to a JavaScript conflict with another plugin. Check the browser console for script errors and disable other menu or animation plugins one at a time.
- Side menu displays inconsistently between page loads – a real support case (ticket #15238) reported the widget alternating layouts across pages sharing the same template. This is almost always stale page or CDN cache after a settings change – clear all caching layers and hard-refresh.
- Submenu opens off-screen or overlaps page content – source-verified, not from a specific ticket: this happens when Open Direction is set toward the edge the side menu itself sits on (for example, a right-docked side menu with a submenu also opening right). Switch Open Direction to open toward the page center instead.
Also, read how to create a vertical menu in Elementor.
