Navigation · Elementor
Off-Canvas Content widget for Elementor
A panel that slides in from the edge: mobile menu, filters, or extra content you do not want on the canvas.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A panel that slides in from the edge: mobile menu, filters, or extra content you do not want on the canvas.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Off-Canvas Content”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Select Template”, “Box Position”, “Maximum Width (px)”, “Set the Maximum Height of Off-Canvas Content”. Style and Content tabs are listed on this page.
When to use it
- A mobile nav.
- Shop filters.
- A “more details” drawer.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| General — Select Template | Ajax Select2: options load from a King Addons admin-ajax endpoint. |
| General — Box Position | The chosen value is read in render() and applied on the front end. Options: Top; Right; Bottom; Left. |
| General — Maximum Width (px) | Writes CSS `max-width` onto the widget’s front-end markup. (default 300, min 0). |
| General — Set the Maximum Height of Off-Canvas Content | Switcher inspector control (`kng_off_canvas_box_max_height_switcher`). |
| General — Maximum Height (px) | Writes CSS `max-height` onto the widget’s front-end markup. (default 300, min 0). |
| General — Button Text | Printed in the widget HTML from render(). |
| General — Disable Button | This is a useful feature if there is a need to set a custom element as the trigger instead of the default button. |
| General — CSS Class of trigger element (optional) | Apply a specific CSS class to your custom trigger element, such as a button, text, a menu item, etc. You can add the class in the Advanced tab of the new trigger element. Then, enter the same class in this field as well. This way, the off-canvas content will open when you click on the trigger element. Please check the result on the live website, due to limitations of the Elementor preview mode. |
| Button — Button Horizontal Position | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Button (Normal) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-off-canvas-button`. |
| Button (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Button (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Button (Normal) — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Button (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-off-canvas-button`. |
| Button (Normal) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-off-canvas-button`. |
| Button (Normal) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Button (Hover) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-off-canvas-button:hover`. |
| Button (Hover) — Text Color | Writes CSS (king-addons-off-canvas-button, color) onto the widget’s front-end markup. |
| Button (Hover) — Background Color | Writes CSS (king-addons-off-canvas-button, background-color) onto the widget’s front-end markup. |
| Button (Hover) — Padding | Writes CSS (king-addons-off-canvas-button, padding) onto the widget’s front-end markup. |
| Button (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-off-canvas-button:hover`. |
| Button (Hover) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-off-canvas-button:hover`. |
| Button (Hover) — Border Radius | Writes CSS (king-addons-off-canvas-button, border-radius) onto the widget’s front-end markup. |
| Off-Canvas box — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Off-Canvas box — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Off-Canvas box — Z-Index of Off-Canvas box (optional) | Note: The Off-Canvas box may not display over all elements in the Elementor preview mode here, due to limitations of the Elementor preview mode. However, the Off-Canvas box will display properly over all elements on the live website. Please check it there. |
| Close Button — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Close Button — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Close Button — Size (px) | Writes CSS `font-size` onto the widget’s front-end markup. (default 20, min 1). |
| Overlay — Overlay Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
What does Off-Canvas Content actually change on the page?
A panel that slides in from the edge: mobile menu, filters, or extra content you do not want on the canvas. Inspector labels from this widget’s PHP include “Select Template”, “Box Position”, “Maximum Width (px)”, “Set the Maximum Height of Off-Canvas Content”.
How do I add Off-Canvas Content in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Off-Canvas Content”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related navigation widgets
One Page Navigation
Anchor navigation for a one-page layout. Links scroll to sections; styling is CSS-only.
Mega Menu
A menu widget that can hold Elementor content in dropdowns — columns, cards, CTAs — not only nested links.
Breadcrumbs
A breadcrumb trail for the current page, with separators and styling in Elementor.
Search (AJAX, live results, filters)
AJAX search with live results and optional filters. This is a search field, not a posts grid.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Off-Canvas Content after you activate it.