Skip to content

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

Updated On : September 14, 2026By : Reading Time : 2 minutes

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.
Table of Contents

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.

LIVE BLOCK LINK

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

Steps

  1. Add the Popup Builder block to your page and click Design from Scratch.
  1. In the Content panel, choose a Type and set the popup’s size.
The Content panel with the Type setting
  1. Set Content Type and add what the popup should show.
The Content Type setting with Pattern, Content, Editor and Shortcode
  1. Open Display Conditions and switch On Button Click on.
The Display Conditions panel with On Button Click
  1. In the Content panel, set Type to Slide or Push Content.
The Type setting with Popup, Slide and Push Content
  1. Set Direction to the side the panel should come from.
The Direction setting for a slide-in panel
  1. Set Content Type to Pattern and choose a saved pattern holding your menu.
The Content Type setting
  1. 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

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

Why isn't the off canvas popup menu closing when I click outside it or press Esc?

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.

What should I use for the off canvas menu trigger in WordPress?

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.

Should I build the popup menu with a Pattern or with the Editor?

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.

What type of popup works best for an off canvas side menu?

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.

Where should I place an off canvas popup menu in WordPress?

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.

What do I need installed before creating an off canvas popup menu with Nexter?

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 for the feature overview and includes a LIVE BLOCK LINK if you want to inspect the block itself.

Last reviewed: September 15, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123…………………………………………………………………54