---
title: "How to create an Off Canvas Popup Side Menu in WordPress?"
url: https://nexterwp.com/docs/off-canvas-popup-menu-in-wordpress/
date: 2023-02-06
modified: 2026-08-18
author: "Aditya Sharma"
description: "As a WordPress website owner, creating an off canvas popup menu for your WordPress site can be an effective way to improve user experience. An off canvas popup menu allows..."
image: https://nexterwp.com/wp-content/uploads/2024/05/off-canvas-popup-menu-in-wordpress-1024x519.jpg
word_count: 457
---

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

## Key Takeaways

- Nexter Blocks Popup Builder block creates an off canvas popup menu in WordPress, and the block is part of Nexter Blocks, so it needs to be installed and activated.
- Popup Builder block uses Content > Type options like Slide, Push Content, or Slide Along Content, and Push Content and Slide Along Content slide the entire website content while opening and closing.
- Popup Load Settings > Type sets Icon as the off canvas menu trigger button, and Extra Options turns off Esc Button Close Content and Outer Click Close Content so the menu stays open.

As a WordPress website owner, creating an off canvas popup menu for your WordPress site can be an effective way to improve user experience. An off canvas popup menu allows visitors to easily navigate your website with its intuitive sliding menu and provides an improved level of user engagement.

*To check the complete feature overview documentation of the Nexter Blocks* Popup Builder block, [click here](https://nexterwp.com/docs/add-popup-builder-in-wordpress/).

***Requirement  - This block is a part of the Nexter Blocks*, make sure its installed & activated to enjoy all its powers.**

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-popup-builder/)

Despite what you may think, it’s actually relatively easy to create an off canvas popup menu in WordPress using the Popup Builder block from the Nexter Blocks.

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

https://youtu.be/cUqsOejgx3w?t=183

To create an off canvas popup side menu add the block on the page/template and go to **Content** > **Type** from the dropdown you can choose **Slide**, **Push Content,** or **Slide Along Content** options all will allow you to create an off canvas menu effect.

![](https://nexterwp.com/wp-content/uploads/2023/02/pop-up-builder-content-type-slide-1.png)

With the **Push Content** and **Slide Along Content** option, the popup will slide the entire website content while opening and closing 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 ideally choose **Left** or **Right** from the **Direction** section but you can choose other options as well.

Now for the popup content go to the **Content Type** dropdown from here you can either choose **Pattern** or **Editor** option.

If you choose Pattern then first you have to create a Pattern with a menu, for this, you can use normal links or you can use the Navigation Menu block from the Nexter Blocks or any other block you may like.

Once you have created your Pattern choose it from the **Pattern** dropdown.

![](https://nexterwp.com/wp-content/uploads/2023/02/pop-up-builder-content-choose-pattern-1.png)

But if you choose the Editor option then click on the popup trigger element and then you can directly add the blocks in the popup to create your menu.

You can choose whichever option you are comfortable with but the Pattern option would be easier to maintain.

Then go to **Popup Load Settings** > **Type** and from the section choose **Icon** to set the off canvas menu trigger button.

Finally from the **Extra Options** tab, turn off both **Esc Button Close Content** and **Outer Click Close Content** options.

![](https://nexterwp.com/wp-content/uploads/2023/02/pop-up-builder-outer-click-close-content-new.png)

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

So this is how you can make an off canvas popup side menu in WordPress.

![](https://nexterwp.com/wp-content/uploads/2023/02/off-canvas-demo-3.gif)

Check [how to make a full screen popup menu in WordPress](https://nexterwp.com/docs/full-width-menu-popup-in-wordpress/).

## Frequently Asked Questions

**Q: Why isn't the off canvas popup menu closing when I click outside it or press Esc?**
A: That behavior is controlled by the Extra Options tab. The tutorial says to turn off both Esc Button Close Content and Outer Click Close Content, which keeps the menu open until the trigger or popup logic closes it. That matters for navigation menus because accidental outside clicks are common on mobile and can interrupt browsing.

**Q: What should I use for the off canvas menu trigger in WordPress?**
A: The Popup Load Settings > Type section is set to Icon for the trigger button. That gives you a compact menu opener, which fits an off canvas side menu better than a large text button in most headers. Since this is meant for the site header, a small icon keeps the navigation accessible without taking over the layout.

**Q: Should I build the popup menu with a Pattern or with the Editor?**
A: Pattern is usually easier to maintain, while Editor is better when you want to build the menu directly inside the popup. The page says Pattern lets you create a reusable menu with normal links or the Navigation Menu block from Nexter Blocks, then pick it from the Pattern dropdown. That makes updates simpler if your menu changes often.

**Q: What type of popup works best for an off canvas side menu?**
A: Slide, Push Content, and Slide Along Content all create an off canvas effect, but they behave differently. Push Content and Slide Along Content move the whole website content while opening and closing, while Slide only opens the popup itself. If you want a cleaner side panel without shifting the page around, Slide is the simpler choice.

**Q: Where should I place an off canvas popup menu in WordPress?**
A: The tutorial says to place the Popup Builder block in the header template because this is meant to be your website menu. Putting it in the header keeps the trigger visible across pages and matches how visitors expect to open navigation. Nexter Blocks provides this Popup Builder block as part of its set of blocks.

**Q: What do I need installed before creating an off canvas popup menu with Nexter?**
A: Nexter Blocks needs to be installed and activated first, because this block is part of Nexter Blocks. Without that, you won't have access to the Popup Builder block used in the tutorial. The page also points to [click here](https://nexterwp.com/docs/add-popup-builder-in-wordpress/) for the feature overview and includes a [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-popup-builder/) if you want to inspect the block itself.