BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Download free
Pro widget

Off-Canvas Panel Widget for Elementor Pro

A slide-in panel for menus, templates or text

See plans and pricing Read the guide
Overview

What Off-Canvas Panel does

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.

Live demo

See it in action

Features

What it can do

  • Three content types: a WordPress menu, a saved template, or text

  • Menus get sub menu toggle buttons and can open the branch of the current page

  • Slides in from the left, right, top or bottom

  • Three animations: slide, slide and fade, or a floating card with a gap around it

  • Hamburger icon in three styles, a button, or no trigger at all

  • Any link to the panel ID on the same page opens and closes the panel

  • Panel header with a logo, a title and a close button, plus text at the bottom

  • Menu items and text blocks can appear one by one when the panel opens

Use cases

When to use it

Mobile menu

Place the widget in the header with the hamburger icon and pick a WordPress menu. Sub menus open with their own toggle buttons.

Filters or cart panel

Build the filters or cart in a saved template and show it in a panel that slides in from the side.

One-page sites

Keep Close When a Link Is Clicked on, so the panel closes after a visitor picks a section link.

Setup

How to set it up

What you need: A WordPress menu (Appearance, Menus) for menu content, or a saved template for template content.

Read the full guide

  1. Drag the Off-Canvas Panel widget to the place where the trigger should appear, for example the header.

  2. In the Panel Content section, set Content to WordPress Menu and choose a Menu, or pick a saved template or text.

  3. Add a Logo and a Title for the panel header if you want them.

  4. In the Open With section, choose the Trigger on the Page: Hamburger Icon, Button or Nothing (open from links).

  5. In the Panel section, choose the side under Slides In From and pick an Animation.

  6. Decide how the panel closes with Close on Background Click and Close When a Link Is Clicked.

  7. Open the Style tab to set the trigger, panel, header, menu and bottom text styles.

FAQ

Questions and answers

How do I open the panel from my own button or menu link?

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.

Do sub menus work inside the panel?

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.

Can I show something other than a menu?

Yes. Set Content to Saved Template to show any Elementor saved template, or to Text Editor for plain content.

Can I use my own menu icon?

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.

Keep exploring

Related widgets

AJAX Live Search Pro

A search box that shows results while visitors type.

Nav Menu Pro

Show a WordPress menu with dropdowns, mega panels and a mobile menu.

Breadcrumbs Pro

Show visitors where they are with a breadcrumb trail.

Cookie Consent Pro

Cookie notice with categories that holds scripts back until visitors agree.
Bright Addons Pro

Get Off-Canvas Panel with Bright Addons Pro

Bright Addons Pro has 80 Pro widgets plus all 51 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $18 a year, with a 14-day money-back guarantee.

See plans and pricing See all widgets