---
title: "How to Create a Side Menu in Elementor?"
url: https://theplusaddons.com/docs/create-a-side-menu-in-elementor/
date: 2023-10-27
modified: 2026-05-11
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Side-Menu-in-Elementor_-1024x536.jpg
word_count: 504
---

# How to Create a Side Menu in Elementor?

## Key Takeaways

- The Plus Addons for Elementor allows users to add a vertical sidebar menu or sidebar toggle menu using the Navigation Menu widget.
- E-commerce sites benefit from the Navigation Menu widget by providing persistent sidebar navigation for multiple product categories.
- The Vertical Side Title Bar toggle feature enables a collapsible toggle bar for the menu, keeping it hidden by default until clicked or hovered over.

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.

**Best Used For:**

- 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

*To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, [click here](/docs/navigation-menu-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its 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)

To do this, add the Navigation Menu widget to the sidebar or a page template and follow the steps –

> *Note: To create the template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* or you can use Elementor Pro if you are already using 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.](https://theplusaddons.com/docs/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](/docs/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.

Also, read [how to create a vertical menu in Elementor](https://theplusaddons.com/docs/create-a-vertical-menu-in-elementor/).

## Frequently Asked Questions

**Q: What should I do if the side menu doesn't appear after following the setup steps?**
A: If the side menu isn't showing, first ensure that the Navigation Menu widget from The Plus Addons for Elementor is installed and activated. It's crucial that you select 'Vertical SideMenu' from the Menu Direction section in the widget settings. If the menu still doesn't display, check if the template you are using supports side menus, as some templates may not be compatible.

**Q: What is the best way to set the toggle behavior for the side menu?**
A: Choosing the right toggle behavior for your side menu can enhance user interaction. You can set the Title Bar Hover/Click dropdown to 'Normal' for a constantly visible menu, 'Hover' for a menu that appears on mouse hover, or 'Click' for a toggle menu that opens on click. Each option serves different user preferences, so consider your audience when making this choice.

**Q: Are there any limitations when creating a side menu in Elementor?**
A: One limitation to keep in mind is that the Navigation Menu widget from The Plus Addons for Elementor only works with Elementor and not with other page builders like Gutenberg or Divi. Additionally, the functionality of the side menu may depend on the template you are using, so ensure compatibility before implementation.

**Q: How do I create a menu with repeater in Elementor?**
A: Creating a menu with a repeater in Elementor can be done using the features provided by The Plus Addons for Elementor. This allows you to dynamically generate menu items based on your content. For detailed steps, refer to the guide on [creating a menu with repeater in Elementor](https://theplusaddons.com/docs//create-a-menu-with-repeater-in-elementor/). This method can significantly streamline the process of managing menu items.