Atomic Element · Pro
Keep the page clean and put the extras one click away: a full menu, a quote form, a search box or shop filters in a panel that slides over the page as it is. Built from atomic parts you style like the rest of Elementor 4.
The short answer
The Offcanvas is an Elementor 4 Atomic Element from Animation Addons for Elementor that builds an off-canvas menu or panel: a trigger slides a panel in from any edge of the screen, over the page as it is. The panel is an atomic container, so it holds menus, forms, filters or text, styled with Elementor 4 Classes and Variables.
Many "Elementor V4 compatible" addons are classic v3 widgets that still run on V4. Offcanvas is a native Atomic Element, built on Elementor's Atomic Editor architecture.
| Plan | Pro Animation Addons Pro |
|---|---|
| Element type | Native Elementor 4 Atomic Element (composite: four atomic parts, including a trigger and a panel) |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on; usable in Animation Addons header templates |
| Panel content | Any atomic elements: Nav, WP Menu, Form, Search Form, Loop Filters, Heading, Image… |
| Motion | Panel slides in from any edge; extensions such as Regular Animation, Parallax and Custom CSS work on the element |
| Editing | Open Panel (Editor) shows the panel on the canvas while you style it; no effect on the live page |
| Trigger icon | Sized with one Font Size value in the Style tab's Typography section |
| Requires | Animation Addons for Elementor (free) + Animation Addons Pro |
| Plugin version | Animation Addons 4.3 · Last updated October 2026 |
Demo variations
Every demo is built with the Offcanvas, part of Animation Addons Pro, plus native Elementor 4 elements. Extensions they add are named on each card.
The header shows a logo and a "Menu" label. The panel slides in from the right, full height, with four oversized links, the studio address and an email link.
A "Get a quote" trigger in the header opens a wide panel from the right with a short form, so the visitor never leaves the page they were reading.
A "Filter" trigger above the product grid opens a panel from the left with category checkboxes, a price slider and a sort list; a short returns note sits under the filters.
A magnifier trigger opens a panel from the top edge with a large search box and three popular topics as links.
An "Info" trigger opens a two-column panel: a photo of the dining room on one side, opening hours, address and a map on the other.
A "Schedule" trigger opens a tall panel from the left listing the day's sessions, with a countdown to the next one and a ticket button.
Features
Every option below is a real control in the Offcanvas panel or part of how the element renders. Nothing here needs custom code.
The panel is an atomic container, not a fixed set of tabs. Drop in a menu, a form, filters or a whole layout, and the elements inside keep their own Style tab and extensions.
Switch on Open Panel (Editor) and the panel stays open on the canvas while you style it. Switch it off before you preview; it never changes the live page.
On the live page the panel is moved to the end of the page body before it opens, so a parent with a transform or animation cannot trap or clip it. The trigger can sit inside an animated header and the panel still covers the screen.
Trigger and panel take Classes and Variables. The trigger icon is sized by one Font Size value in Typography, so it scales with the trigger text instead of needing separate width and height.
Offcanvas sits in the panel's header group next to Nav, WP Menu and Search Form, so it is at hand when you build an Animation Addons header template, where most side menus live.
Built on the atomic base
Why it mattersBecause the panel is a real container, a menu panel and a contact panel can share one Class, and the content inside never depends on a fixed widget layout.
Step by step
Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Get Animation Addons ProInstall Animation Addons for Elementor and Animation Addons Pro, then open a page or header template with the Atomic Editor on.
Drag Offcanvas to where the trigger should appear, usually the header.
Choose the edge the panel slides in from.
Switch on Open Panel (Editor) and add content to the panel: a menu, a form, a search box or filters.
Style the trigger and panel in the Style tab, then switch Open Panel (Editor) off.
Publish and test opening and closing on desktop and a phone.
Honest comparison
What each option has, side by side. We list where the other choice is the better fit, too.
| Feature | Elementor Pro Off-Canvas (classic widget, 3.22) | Animation Addons Offcanvas |
|---|---|---|
| Requires Elementor Pro | Yes | No (needs Animation Addons Pro) |
| Native Elementor 4 atomic element | No, classic widget | Yes |
| Panel content | Nested container | Atomic container |
| How it opens | A dynamic link action on another element | Its own trigger element |
| Position | Left, right or center; top, center or bottom | Any edge |
| Styling | Classic widget style controls | Elementor 4 Style tab, Classes and Variables |
Compared with Elementor 4.3.3 (September 2026).
Elementor Pro's Off-Canvas is mature and documents overlay and ESC closing. Choose Offcanvas when you build in the Atomic Editor without Elementor Pro and want the panel on your Classes.
Who it's for
The people who get the most out of it, and what they use it for.
Building minimal headers that open a side menu.
Keeping a quote form one click away.
Moving filters into a panel on small screens.
Who want slide-in panels without Elementor Pro.
FAQ
In Elementor 4, drag the Offcanvas element from Animation Addons for Elementor into your header, choose the edge the panel slides in from, and switch on Open Panel (Editor). Add WP Menu or Nav inside the panel, style it, switch the editor preview off and publish. The trigger then slides the Offcanvas panel over the page.
Yes. The Animation Addons Offcanvas element runs on Elementor Free with Animation Addons Pro and does not use Elementor Pro's Off-Canvas widget or popup builder. You build the Offcanvas panel directly on the page or in a header template and fill it with any atomic elements.
Yes. The Animation Addons Offcanvas panel is an atomic container, so the free atomic Form, Search Form or Loop Filters can sit inside it. Loop Filters placed in an Offcanvas panel still drive the Loop Grid on the page, which makes it a practical filter panel for shops on small screens.
A mobile menu replaces desktop navigation on small screens. An off-canvas panel is a slide-in area for any screen size and any content. In Animation Addons for Elementor, WP Menu and Nav have their own mobile drawers for navigation, while Offcanvas is the general-purpose panel for forms, filters, search or info.
No. The Animation Addons Offcanvas panel content is part of the page HTML; on the live page it is moved to the end of the body, not loaded later. Links inside an Offcanvas menu are ordinary links that search engines can crawl. Keep the main navigation links descriptive, as you would in any menu.
Yes. The Animation Addons Offcanvas works on phones and tablets, and every Style tab value can be set per breakpoint, so the panel can be full width on a phone and a narrow column on desktop. Keep panel content short on mobile so visitors do not have to scroll inside the panel.
Yes. The Animation Addons Offcanvas has an Open Panel (Editor) switch that keeps the panel visible on the canvas while you add and style its content. The switch only affects the editor; visitors always see the panel closed until they use the trigger.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the Offcanvas on the same page or template.
render an existing WordPress menu inside the panel; free, with its own mobile drawer.
a custom navbar when you need a mobile menu rather than a general panel.
a quote or contact form that opens from any page.
shop and directory filters to place in the panel.
a search box for a top-edge search panel.
Menus, forms, filters or info in a native Elementor 4 panel, without Elementor Pro. Need something free? WP Menu includes its own mobile drawer for a WordPress menu.
