How to set up and style the Off-Canvas Panel widget in Elementor.
Off-Canvas Panel slides a panel in from the left, right, top or bottom of the screen. The panel can hold a WordPress menu with sub menu toggles, a saved template or text. Use it for mobile menus, side carts, filters and extra information.
Part of: Bright Addons Pro. Before you start: A WordPress menu (Appearance, Menus) for menu content, or a saved template for template content.
| Option | What it does |
|---|---|
| Content | What the panel holds: a WordPress menu, a saved template or text. |
| Menu | The WordPress menu shown in the panel. Create menus in Appearance, Menus. |
| Levels | How many menu levels to show: all, 1, 2 or 3. |
| Open the Current Page Branch | Opens the sub menu that contains the current page. |
| Template | The saved template shown in the panel. |
| Title | The title in the panel header, Menu by default. |
| Text at the Bottom | Text under the content, for example contact details or opening hours. |
| Option | What it does |
|---|---|
| Trigger on the Page | A hamburger icon, a button, or nothing when the panel opens from links. |
| Icon Style | Three even lines, short middle line, two lines, or My Own Icon or SVG. |
| Icon | With My Own Icon or SVG: an icon from the library, or Upload SVG to use your own file. |
| Icon While Open | Optional icon shown while the panel is open. |
| Button Text | The text of the button trigger. |
| Panel ID for Links | An ID that lets any link to it on the page open the panel. |
| Option | What it does |
|---|---|
| Slides In From | The side the panel comes from: left, right, top or bottom. |
| Animation | Slide, Slide and Fade, or Floating Card (with a gap around it). |
| Items Appear One by One | Brings in the menu items or text blocks one after another. |
| Dark Background Behind | Covers the page with a dark layer while the panel is open. |
| Close on Background Click | Closes the panel when the visitor clicks the dark background. |
| Close When a Link Is Clicked | Closes the panel after a link inside it is clicked. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $18 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
hamburger icon width and line thickness, and the typography, colors, background, border, radius, shadow and padding of the trigger.
width for left and right panels, height for top and bottom panels, background, shadow, padding, radius, text and accent colors, and the color and blur behind the panel.
logo width, title typography and color, the line under the header, and the close button size, colors and radius.
typography for items and sub menu items, colors for normal, hover and current page, item padding and radius, divider color, sub menu indent and arrow color.
typography, color and text shadow of the bottom text.
Enter a name in Panel ID for Links, for example side-menu, and link to #side-menu. Any link to that ID on the same page opens the panel, and a second click closes it.
Yes. Every menu item with children gets a toggle button that opens and closes its sub menu. Use Levels to limit how deep the menu goes.
Yes. Set Content to Saved Template to show any Elementor saved template, or to Text Editor for plain content.
Yes. Set Icon Style to My Own Icon or SVG, then pick an icon or choose Upload SVG. Icon While Open can show a different icon while the panel is open.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide