The Elementor page builder lets you create websites with its drag-and-drop interface, and adding an off-canvas popup menu gives visitors a clean side navigation option without navigating away from the page.
With the Popup Builder widget from The Plus Addons for Elementor, you can 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.
Best Used For:
- Mobile-first websites where the header menu needs to collapse into an off-canvas side panel
- Portfolio or agency sites that want a slide or reveal navigation overlay triggered by a menu icon
- Single-page sites where a persistent side menu improves navigation without disrupting the view
Requirement - This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated.
To do this, first create an Elementor template with a menu. Use normal links for the menu items, or use the Navigation Menu widget from The Plus Addons for Elementor for a full-featured navigation inside the popup. See How to Create a Vertical Navigation Menu in Elementor for Free for details on setting up the menu.
Let’s say we named the template Popup Menu.
Since this will be the menu for your website, place the Popup Builder widget in the header template.
Once you have created your template, add the widget to the page or template and go to Content > Popup Type. Choose either Reveal Content or Slide. Both options create an off-canvas menu effect.
With the Reveal Content option, the entire website content shifts while the popup opens. With the Slide option, the popup slides in over the content.
Choose the option that matches your design intent. For the popup direction, choose Left or Right from the Open Direction dropdown.
After this, choose the Template option from the Content Type dropdown and from the Select Content dropdown, choose your Elementor template with the menu.
Learn, How to show Elementor popup for a specific date and time period.
Finally, for the popup trigger, from the Select Option dropdown choose the Icon option and select the appropriate style for the icon. You can also choose a custom image as the trigger.
Since this is a menu popup, disable both Esc Button Close Content and Outer Click Close Content from the Extra Options tab.
Suggested read, how to delay popup on user inactivity in Elementor
With both options disabled, the menu will not close if a visitor clicks outside the popup or presses the Esc key.
From the Style tab, set the Popup Background Overlay to transparent to remove the overlay effect behind the menu.
Now, when a visitor clicks the icon, the menu popup opens with the off-canvas effect. If you are building a dedicated mobile navigation menu, see How to Create a Popup Mobile Menu with Elementor Template.
Also read, how to show Elementor popup when arriving from a specific page Link.
