Elementor

How to Create a Side Menu in Elementor [Without Coding]

Updated On : May 22, 2025

Want to make your website navigation seamless and user-friendly? A cluttered or confusing menu can frustrate visitors and drive them away, costing you engagement and conversions. 

But you don’t have to settle for a basic layout. With Elementor, you can easily create a stylish, functional side menu that elevates your site’s experience. 

In this blog, you’ll discover step-by-step how to design a standout side menu in Elementor without any coding.

Let’s get started!

Table Of Content

A well-designed side menu can transform your website’s navigation, making it easier for visitors to find what they need. Elementor, combined with The Plus Addons, lets you create a stylish and functional side menu! 

Here’s how you can set up your side menu step by step.

Step 1: Install The Plus Addons for Elementor

First, make sure you have The Plus Addons for Elementor installed and activated on your website. 

This powerful toolkit gives you access to the Navigation Menu widget, which is essential for building your side menu.

Step 2: Add the Navigation Menu Widget

Navigate to the sidebar or the page template where you want your side menu to appear. Drag and drop the Navigation Menu widget from The Plus Addons into your desired section.

Tip: You can use the free Nexter Builder to create your template, or Elementor Pro if you already have it.

Step 3: Configure Your Menu Settings

  • Menu Type: Choose the menu type that fits your needs from the dropdown.
  • Menu Direction: Select Vertical SideMenu to make your menu appear on the side.
  • Open Direction: Decide how submenus will open-choose the direction that works best for your layout.
  • Select or Create Menu: Depending on your chosen menu type, either select an existing menu or create a new one.

Step 4: Customize the Side Menu

  • Submenu Hover Event & Effect: Pick how you want submenus to behave and look when hovered over.
  • Vertical Side Title Bar: Enable this toggle to add a stylish toggle bar for your menu.
  • Toggle Bar Behavior: Set how the menu opens using the Title Bar Hover/Click dropdown:
    • Normal: Always shows the menu.
    • Hover: Reveals the menu when hovered.
    • Click: Opens the menu when clicked.
  • Title & Link: Customize the toggle bar’s title and add a link if needed.
  • Prefix & Postfix Icons: Personalize your toggle bar with icons before or after the title.

Once you’ve configured these settings, your sidebar menu will be live and ready to enhance your site’s navigation.

Wrapping Up

Creating a side menu in Elementor is straightforward with The Plus Addons. By following these steps, you’ll offer your visitors a seamless and visually appealing way to explore your website. 

Whether you’re running an e-commerce store or a content-rich site, a well-crafted side menu can make all the difference in user experience. 

Start building yours today and watch your site’s navigation and engagement improve!

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Community

Related Blogs