---
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-09-11
lang: en
author: "Aditya Sharma"
description: "Do you want a menu that slides in from the side when visitors tap a hamburger icon? That is an off-canvas menu, and it keeps the header clean on every..."
image: https://theplusaddons.com/wp-content/uploads/2020/10/How-to-create-an-Off-Canvas-Popup-Side-Menu-in-Elementor_-1024x536.jpg
word_count: 621
---

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

## 

- The Plus Addons for Elementor Popup Builder widget creates an off-canvas menu from any Elementor template, and the menu slides in from the side when visitors tap a hamburger icon.
- Popup Builder is Pro only and does not appear in the widget panel of the free plugin; it is enabled under ThePlus Settings > Widgets.
- Popup Type offers Slide, Reveal Content, Corner Box, and Modal Popup, with Slide as the default and Open Direction set to Left or Right.
- On Click Link Popup Close stays on by default in Content > Extra Options, so the panel closes when a visitor picks a page; Reveal Content moves the whole page aside and can affect fixed or sticky elements.

Do you want a menu that slides in from the side when visitors tap a hamburger icon? That is an off-canvas menu, and it keeps the header clean on every screen size.

The Popup Builder widget in The Plus Addons for Elementor builds one from any menu you design as an Elementor template.

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

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

## Before You Start

- **Edition:** **Pro** — the Popup Builder widget is part of The Plus Addons for Elementor Pro. It does not appear in the widget panel of the free plugin.- **A header template**, if the menu should appear on every page — from [Nexter Builder](https://nexterwp.com) or Elementor Pro's Theme Builder.- **Widget to enable:** Popup Builder, switched on under **ThePlus Settings > Widgets**.

## Step 1: Design the menu as a template

Create an Elementor template — say *Popup Menu* — with your links. Plain text links work, or use The Plus Addons Navigation Menu widget inside it for a full menu with sub-items.

## Step 2: Add the Popup Builder to your header

Edit the header template and drag in the **Popup Builder** widget where the hamburger icon should sit.

## Step 3: Choose Slide or Reveal Content

In **Content > Content**, set **Popup Type**:

- **Slide** (default) — the menu slides in over the page.- **Reveal Content** — the whole page moves aside to reveal the menu.

Set **Open Direction** to **Left** or **Right**, and adjust **Open Width** if the panel should be wider or narrower.

![The Open Direction dropdown for a Slide popup](https://theplusaddons.com/wp-content/uploads/2026/09/tp-off-canvas-open-direction-wide-slide.webp)

## Step 4: Show the menu template

Set **Content Type** to **Template** and choose *Popup Menu* in **Select Content**.

## Step 5: Use a hamburger icon as the trigger

Set **Select Option** to **Icon** and pick an **Icon Style**, or choose **Custom** to upload your own image.

![Select Option set to Icon, with the Icon Style choices](https://theplusaddons.com/wp-content/uploads/2026/09/tp-off-canvas-icon-style-wide-icon.webp)

## Step 6: Decide how it closes

In **Content > Extra Options**, **Esc Button Close Content**, **Outer Click Close Content** and **On Click Link Popup Close** are all on by default. For a menu, keep **On Click Link Popup Close** on so the panel shuts when a visitor picks a page. Turn the other two off only if the menu should stay open until the close icon is used.

To remove the dark layer behind the menu, go to **Style > Open Content > Popup Background Overlay** and make it transparent.

## Settings Reference

| Setting | Where | Options | Default |
| ------- | ----- | ------- | ------- |
| Popup Type | Content > Content | Slide, Reveal Content, Corner Box, Modal Popup | Slide |
| Open Direction | Content > Content | Left, Right, Top, Bottom | Left |
| Open Width | Content > Content | Slider, per device | Not set |
| Select Option | Content > Content | Icon, Call To Action, Hidden, Lottie | Call To Action |
| Icon Style | Content > Content | Style 1 to 3, Custom | Style 1 |
| On Click Link Popup Close | Content > Extra Options | On / Off | On |

## Limitations

- **Pro only.** The Popup Builder is not in the free plugin.- **The menu is a template.** Changing the links means editing the template, not WordPress's Menus screen — unless the template contains a menu widget that reads a WordPress menu.- **Reveal Content moves the whole page.** Fixed or sticky elements on the page can behave differently while it is open; use Slide if that happens.

## Troubleshooting

### The menu does not close after a link is clicked

Turn on **On Click Link Popup Close** in Content > Extra Options. Links to a section on the same page otherwise leave the panel open.

### The icon does not appear

Check **Select Option** is Icon, and the icon colour on the Style tab, in **Toggle Icon/Hamburger**, is not the same as the header background.

## Related Docs

- [Popup Builder widget: settings overview](https://theplusaddons.com/docs/popup-builder-elementor-widget-settings-overview/) — every control in the widget.- [Create a full-width menu popup](https://theplusaddons.com/docs/full-width-menu-popup-in-elementor/)- [Use an Elementor template in a popup](https://theplusaddons.com/docs/popup-with-elementor-templates/)- [Control how a popup closes](https://theplusaddons.com/docs/close-elementor-popup-with-esc-or-clicking-outside/)

## Frequently Asked Questions

**Q: What do I need before building an off canvas popup menu in Elementor?**
A: The Popup Builder widget is part of The Plus Addons for Elementor Pro, so it will not appear in the free plugin. The page also says the widget must be switched on under ThePlus Settings > Widgets, and the menu should live in a header template if you want it on every page. That setup matters because the popup is built from an Elementor template, not directly from the page content.

**Q: How do I make the side menu use my own Elementor template?**
A: The menu content comes from an Elementor template, such as a template named Popup Menu. That template can contain plain text links or the The Plus Addons Navigation Menu widget if you want sub-items. The practical upside is that you edit the template itself when links change, which keeps the popup content separate from the header trigger.

**Q: Should I use Slide or Reveal Content for an off canvas popup menu?**
A: Slide is the default and keeps the panel moving over the page, while Reveal Content shifts the whole page aside to expose the menu. The page notes that Reveal Content can behave differently with fixed or sticky elements, so Slide is the safer choice if your header or other pinned elements start acting oddly while the menu is open.

**Q: Why does my off canvas popup menu stay open after I click a link?**
A: That usually means On Click Link Popup Close is turned off in Content > Extra Options. For menus, that setting should stay on so the panel closes when a visitor picks a page. Same-page section links are a common gotcha here, because they can leave the panel open unless link-close behavior is enabled.

**Q: Why is my hamburger icon not showing in the header?**
A: The trigger has to be set to Select Option: Icon, and the icon color in Style > Toggle Icon/Hamburger cannot match the header background. The page also allows Custom if you want to upload your own image instead of using a built-in icon style. That makes this issue more about visibility and trigger choice than about the popup itself.

**Q: How do I remove the dark overlay behind an off canvas popup menu?**
A: The overlay is controlled in Style > Open Content > Popup Background Overlay, and it can be made transparent. That matters because some menus need a cleaner header-to-panel transition without a dark layer behind them. If you want to compare related popup behavior, [Popup Builder widget: settings overview](https://theplusaddons.com/docs/popup-builder-elementor-widget-settings-overview/) covers every control in the widget.