---
title: "How to create an Off Canvas Popup Side Menu in Elementor?"
url: https://theplusaddons.com/docs/off-canvas-popup-menu-in-elementor/
date: 2023-02-09
modified: 2026-05-27
lang: en
author: "Aditya Sharma"
description: "The Elementor page builder lets you create websites with its drag-and-drop interface, and adding an off-canvas popup menu gives visitors a clean side navigation option without navigating away from the..."
image: https://theplusaddons.com/wp-content/uploads/2020/10/How-to-create-an-Off-Canvas-Popup-Side-Menu-in-Elementor_-1024x536.jpg
word_count: 490
---

# How to create an Off Canvas Popup Side Menu in Elementor?

## 

- Elementor's Popup Builder widget from The Plus Addons enables the creation of off canvas menus.
- Users can select between Reveal Content and Slide options for the popup effect in Elementor templates.
- To prevent the menu from closing, users must disable Esc Button Close Content and Outer Click Close Content options.

The Elementor page builder lets you create websites with its drag-and-drop interface, and adding an off-canvas popup menu gives visitors a clean side navigation option without navigating away from the page.

With the Popup Builder widget from The Plus Addons for Elementor, you can add an off-canvas menu to your website.

*To check the complete feature overview documentation of The Plus Addons for Elementor Popup Builder widget, [click here](/docs/popup-builder-elementor-widget-settings-overview/).*

**Best Used For:**

- Mobile-first websites where the header menu needs to collapse into an off-canvas side panel- Portfolio or agency sites that want a slide or reveal navigation overlay triggered by a menu icon- Single-page sites where a persistent side menu improves navigation without disrupting the view

***Requirement  - This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated.***

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

To do this, first create an Elementor template with a menu. Use normal links for the menu items, or use the Navigation Menu widget from The Plus Addons for Elementor for a full-featured navigation inside the popup. See [How to Create a Vertical Navigation Menu in Elementor for Free](https://theplusaddons.com/docs/create-a-vertical-navigation-menu-in-elementor-for-free/) for details on setting up the menu.

Let’s say we named the template Popup Menu.

Since this will be the menu for your website, place the Popup Builder widget in the header template.

Once you have created your template, add the widget to the page or template and go to **Content** > **Popup Type**. Choose either **Reveal Content** or **Slide**. Both options create an off-canvas menu effect.

With the **Reveal Content** option, the entire website content shifts while the popup opens. With the **Slide** option, the popup slides in over the content.

Choose the option that matches your design intent. For the popup direction, choose **Left** or **Right** from the **Open Direction** dropdown.

After this, choose the **Template** option from the **Content Type** dropdown and from the **Select Content** dropdown, choose your Elementor template with the menu.

![](https://theplusaddons.com/wp-content/uploads/2023/02/popup-builder-menu-template-new1.png)

Learn, [How to show Elementor popup for a specific date and time period](https://theplusaddons.com/docs/elementor-popup-on-specific-date-and-time/).

Finally, for the popup trigger, from the **Select Option** dropdown choose the **Icon** option and select the appropriate style for the icon. You can also choose a custom image as the trigger.

![](https://theplusaddons.com/wp-content/uploads/2023/02/popup-builder-icon-trigger-new1.png)

Since this is a menu popup, disable both **Esc Button Close Content** and **Outer Click Close Content** from the **Extra Options** tab.

![](https://theplusaddons.com/wp-content/uploads/2023/02/popup-builder-esc-outer-disable-new.png)

Suggested read, [how to delay popup on user inactivity in Elementor](https://theplusaddons.com/docs/popup-on-user-inactivity-in-elementor/)

With both options disabled, the menu will not close if a visitor clicks outside the popup or presses the Esc key.

From the **Style** tab, set the **Popup Background Overlay** to transparent to remove the overlay effect behind the menu.

Now, when a visitor clicks the icon, the menu popup opens with the off-canvas effect. If you are building a dedicated mobile navigation menu, see [How to Create a Popup Mobile Menu with Elementor Template](https://theplusaddons.com/docs/create-a-popup-mobile-menu-with-elementor-template/).

Also read, [how to show Elementor popup when arriving from a specific page Link](https://theplusaddons.com/docs/show-elementor-popup-arriving-from-a-specific-url/).