--- 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-09-14 lang: en author: "Aditya Sharma" description: "A full screen popup is wrong for navigation — people want the page still there behind the menu. The Slide and Push Content types bring a panel in from the..." image: https://nexterwp.com/wp-content/uploads/2024/05/off-canvas-popup-menu-in-wordpress-1024x519.jpg word_count: 425 --- # 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. A full screen popup is wrong for navigation — people want the page still there behind the menu. The Slide and Push Content types bring a panel in from the side instead of covering everything. *For every Popup Builder setting in one place, see the [Popup Builder block guide](https://nexterwp.com/docs/add-popup-builder-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-popup-builder/) ## Before You Start - **Edition:** **Pro** — the Popup Builder block is part of Nexter Blocks Pro.- **Block to enable:** Popup Builder, switched on under **Nexter > Blocks** in your WordPress dashboard.- **The popup's content decided:** a short message, a form, or a saved pattern to load into it. ## Learn via Video Tutorial https://youtu.be/cUqsOejgx3w?t=183 ## Steps - Add the **Popup Builder** block to your page and click **Design from Scratch**. - In the **Content** panel, choose a **Type** and set the popup's size. ![The Content panel with the Type setting](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-type.webp) - Set **Content Type** and add what the popup should show. ![The Content Type setting with Pattern, Content, Editor and Shortcode](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-content-type.webp) - Open **Display Conditions** and switch **On Button Click** on. ![The Display Conditions panel with On Button Click](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-conditions.webp) - In the **Content** panel, set **Type** to **Slide** or **Push Content**. ![The Type setting with Popup, Slide and Push Content](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-type.webp) - Set **Direction** to the side the panel should come from. ![The Direction setting for a slide-in panel](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-open-direction.webp) - Set **Content Type** to **Pattern** and choose a saved pattern holding your menu. ![The Content Type setting](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-content-type.webp) - Publish the page and test it on the front end. > *A popup can have more than one display condition switched on at once. Leave **On Button Click** on only if you also want the button to open it.* ## How It Behaves - **Slide** brings the panel in over the page; **Push Content** moves the page across to make room. Both were verified, and the choice is written into the page along with the direction.- **Slide Along Content** and **Corner Box** are two more variations in the same setting.- **Direction** decides which edge the panel comes from.- Esc and clicking outside still close it, which is what people expect from a side menu. ## Limitations - **Pro only.**- Push Content moves the whole page, which can look odd on a layout with fixed or sticky elements.- A side panel needs its width set sensibly for phones, or it can cover the screen entirely.- The menu itself comes from a pattern, so it has to be built and saved before it can be used here. ## Troubleshooting ### The panel covers the whole screen Set **Popup Width** to a smaller value, and check it on a phone as well as a desktop. ### It appears from the wrong side Change **Direction** in the Content panel. ### The page does not move with Push Content Sticky or fixed elements in your theme can sit outside the area that moves. Try **Slide** instead. ## Related Docs - [Make a full width menu popup](https://nexterwp.com/docs/full-width-menu-popup-in-wordpress/)- [Open a popup on button click](https://nexterwp.com/docs/open-popup-on-button-click/)- [Popup Builder block: all settings](https://nexterwp.com/docs/add-popup-builder-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.