---
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-04-12
author: "Aditya Sharma"
description: "The Elementor page builder allows you to create amazing websites with its easy drag and drop interface and adding an off canvas popup menu option can add an extra dimension..."
image: https://theplusaddons.com/wp-content/uploads/2020/10/How-to-create-an-Off-Canvas-Popup-Side-Menu-in-Elementor_-1024x536.jpg
word_count: 431
---

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

## Key Takeaways

- The Plus Addons for Elementor Popup Builder widget allows users to create an off canvas menu for their website.
- Elementor templates can be used with the Navigation Menu widget from The Plus Addons for Elementor to design the popup menu.
- The Popup Builder widget offers two options, Reveal Content and Slide, for displaying the off canvas menu.

The Elementor page builder allows you to create amazing websites with its easy drag and drop interface and adding an off canvas popup menu option can add an extra dimension to your website.

With the Popup Builder widget from The Plus Addons for Elementor, you can easily 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/).*

***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/popup-builder/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To do this, first you have to create an Elementor template with a menu, for this, you can use normal links or if you want, you can use the Navigation Menu widget of The Plus Addons for Elementor.

Let’s say we named the template Popup Menu.

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

So once you have created your template, add the widget on the page/template and go to **Content** > **Popup Type** choose either **Reveal Content** or **Slide** both will allow you to create off canvas menu effect.

With the **Reveal Content** option, it will push the entire website content while opening the popup, but with the **Slide** option the popup will just slide and open.

So it is up to your preference which option you choose. For the popup direction, you should choose **Left** or **Right** from the **Open Direction** dropdown.

After this, simply 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 or you can choose a custom image as well.

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

Since this is a menu popup make sure to disable both **Esc Button Close Content** and **Outer Click Close Content** options 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/)

So your menu will not close if someone clicks outside the popup or presses the Esc key.

From the **Style** tab, you should make the **Popup Background Overlay** transparent to remove the popup overlay effect.

That is it! Now if you click on the icon, the menu popup will open, creating an off canvas effect.

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/).

## Frequently Asked Questions

**Q: What should I do if the off canvas popup menu doesn't open?**
A: If the off canvas popup menu isn't opening, check that you've correctly set the Popup Builder widget in your header template. Ensure that you've selected the appropriate icon for the popup trigger in the Select Option dropdown. Additionally, confirm that both the Esc Button Close Content and Outer Click Close Content options are disabled in the Extra Options tab, as enabling these could prevent the popup from functioning as intended.

**Q: Can I use the off canvas popup menu for a specific date and time?**
A: The off canvas popup menu can be configured to show for a specific date and time using the Popup Builder widget from The Plus Addons for Elementor. You can refer to the guide on [how to show Elementor popup for a specific date and time period](https://theplusaddons.com/docs//elementor-popup-on-specific-date-and-time/) for detailed instructions on setting this up.

**Q: What is the best option for the popup type: Reveal Content or Slide?**
A: Choosing between Reveal Content and Slide for your off canvas popup menu depends on your design preference. The Reveal Content option pushes the entire website content while opening the popup, which can create a more immersive experience. In contrast, the Slide option simply slides the popup open, maintaining the layout of the rest of the page. Consider your site's overall design and user experience when making this decision.

**Q: What happens if I forget to set the Popup Background Overlay to transparent?**
A: If you forget to set the Popup Background Overlay to transparent, the popup may have a distracting overlay effect that could obscure the content behind it. This can detract from the user experience, especially if the menu is meant to be easily accessible. Ensuring the background is transparent allows for a cleaner look and keeps the focus on the menu itself.

**Q: How can I prevent the off canvas popup from closing when clicking outside of it?**
A: To prevent the off canvas popup from closing when a user clicks outside of it, make sure to disable both the Esc Button Close Content and Outer Click Close Content options in the Extra Options tab of the Popup Builder settings. This ensures that the menu remains open for user interaction, which is particularly useful for navigation purposes.