Title: Off-Canvas Sidebars & Menus (Slidebars)
Author: Jory Hogeveen
Published: Colte 26, 2016
Last modified: Colte 2, 2026
---
Search plugins
# Off-Canvas Sidebars & Menus (Slidebars)
By [Jory Hogeveen](https://profiles.wordpress.org/keraweb/)
[Download](https://downloads.wordpress.org/plugin/off-canvas-sidebars.0.5.9.zip)
* [Details](https://fuc.wordpress.org/plugins/off-canvas-sidebars/#description)
* [Reviews](https://fuc.wordpress.org/plugins/off-canvas-sidebars/#reviews)
* [Installation](https://fuc.wordpress.org/plugins/off-canvas-sidebars/#installation)
* [Development](https://fuc.wordpress.org/plugins/off-canvas-sidebars/#developers)
[Support](https://wordpress.org/support/plugin/off-canvas-sidebars/)
## Description
This plugin will add various options to implement off-canvas sidebars in your WordPress
theme based on the Slidebars jQuery plugin.
#### Overview / Features
* Add off-canvas sidebars to the left, right, top and bottom of your website.
* Use sidebar areas (widget-ready areas), menu locations or [custom hooks](https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Actions-&-Filters)
to place content into the off-canvas sidebars.
* You can add control buttons with a widget, menu item, [shortcode](https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Shortcodes)
or with [custom code](https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Theme-setup).
* Various customisation options and settings available in the Appearances menu.
* Extensive API for [PHP](https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/PHP-API)
and [JS](https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/JavaScript-API).
#### Compatibility (IMPORTANT!)
The structure of your theme is of great importance for this plugin. Please read
the [installation guide](https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Theme-setup)
carefully!!
This plugin should work with most themes and plugins although I can’t be sure for
all use-cases. Also note that at this point it’s still a 0.x version…
If the plugin
does not work for your theme, please let me know through the support and add a plugins
and themes list and I will take a look!
**Fixed elements (like sticky menu’s)**
There are known issues with fixed elements
and Slidebars. [Wiki](https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/fixed-elements)
I’ve created two possible solutions for this:
1. Legacy CSS solution. Use basic CSS2 positioning instead of CSS3 transform with
hardware acceleration.
2. JavaScript solution. It is slower but still allows the use of hardware acceleration
for animations.
#### It’s not working! / I found a bug!
Please let me know through [support](https://wordpress.org/support/plugin/off-canvas-sidebars)
and add a plugins and themes list! 🙂
Or [submit an issue here on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/issues)
#### Credits
* Slidebars jQuery plugin by [Adam](https://www.adchsm.com/slidebars/), thank you
for this great plugin!
#### You can find me here:
* [GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/)
* [Keraweb](http://www.keraweb.nl/)
* [LinkedIn](https://nl.linkedin.com/in/joryhogeveen)
#### Actions | Filters | API
* [See Wiki on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/wiki)
#### Credits
* Slidebars jQuery plugin by [Adam](https://www.adchsm.com/slidebars/), thank you
for this great plugin!
#### Ideas?
Please let me know through the support page!
## Screenshots
* [[
* Settings page
* [[
* Sidebars settings page (sidebars closed)
* [[
* Sidebars settings page (sidebar opened)
* [[
* Shortcode generator page
* [[
* Control Widget
* [[
* Menu item
* [[
* Sidebar left (Push effect) -> image from Slidebars website
* [[
* Sidebar left (Overlay effect) -> image from Slidebars website
* [[
* Sidebar top (Push effect) -> image from Slidebars website
## Installation
Installation of this plugin works like any other plugin out there. Either:
1. Upload the zip file to the ‘/wp-content/plugins/’ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
Or search for “Off-Canvas Sidebars” via your plugins menu.
#### Theme Setup
Off-Canvas Sidebars might not work “out of the box” with some themes, please read
the documentation!
[Click here for theme setup documentation.](https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Theme-setup)
## FAQ
### 1. Will this plugin work with any theme?
No, due to the difference in structure not all theme’s are compatible.
Though most
themes can be _made_ compatible with some modifications!
### 2. Can I add as many sidebars as I like?
Yes you can, keep in mind that the more sidebars you add the heavier the load on
the server (PHP) and browser (JS) will be.
### 3. How do I change the CSS for the sidebars?
This plugin only provides the framework that handles the off-canvas part.
There
are some settings that slightly change the display but this is very limited. For
more advanced customisations either: 1. Edit your theme style.css file (usually
located in `/wp-content/themes/YOURTHEME/`). 2. Use a plugin such as [Simple Custom CSS](https://wordpress.org/plugins/simple-custom-css/).
### 4. How can I report security bugs?
You can report security bugs through the Patchstack Vulnerability Disclosure Program.
The Patchstack team helps validate, triage and handle any security vulnerabilities.
[Report a security vulnerability.](https://patchstack.com/database/vdp/9e5fbeb1-a7c9-4a57-98f4-56884d46307d)
## Reviews
### [WHAT A PLUGIN!](https://wordpress.org/support/topic/what-a-plugin-23/)
[xninedesign](https://profiles.wordpress.org/x9design/) Bowte 15, 2025 1 reply
I FINALLY FOUND THE BEST SOLUTION FOR CREATING A OFF-CANVAS ELEMENTS.THANK YOU FOR
YOUR ATTENTION TO THIS MATTER!
### [Top Plugin](https://wordpress.org/support/topic/top-plugin-455/)
[alamea](https://profiles.wordpress.org/alamea/) Seeɗto 5, 2024
works well with Blocksy Theme. Thanks so much!
### [Great plugin](https://wordpress.org/support/topic/great-plugin-38594/)
[dapojaja](https://profiles.wordpress.org/dapojaja/) MBooy 11, 2024
Great plugin
### [Great plugin](https://wordpress.org/support/topic/great-plugin-38023/)
[Michał Czakon](https://profiles.wordpress.org/projektyfsdlublinpl/) Jolal 27,
2023
Great plugin
### [Fantastic plugin!](https://wordpress.org/support/topic/fantastic-plugin-1881/)
[JQuinn](https://profiles.wordpress.org/jquinn33/) Morso 26, 2023
We had been struggling to get off-canvas functionality with other plugins, then
we found Off-Canvas Sidebars and it worked PERFECTLY with all the options we needed
built in. THANK YOU!!! The setup may take a minute for those not familiar with child
themes and finding header/footer files, but once the setup is complete, the rest
is pretty straight forward. And the developer does a great job explaining the initial
setup. WELL DONE!!!
### [Fasntastic](https://wordpress.org/support/topic/fasntastic/)
[inspired888](https://profiles.wordpress.org/inspired888/) MBooy 17, 2023
Seems like a very well thought out plug-in, that I’m sure will be compatible with
most Wordpress themes and sites. It has a lot of flexibility. Highly recommended.
I am grateful Jory (the developer) is making this freely available. Thank you.
[ Read all 38 reviews ](https://wordpress.org/support/plugin/off-canvas-sidebars/reviews/)
## Contributors & Developers
“Off-Canvas Sidebars & Menus (Slidebars)” is open source software. The following
people have contributed to this plugin.
Contributors
* [ Jory Hogeveen ](https://profiles.wordpress.org/keraweb/)
“Off-Canvas Sidebars & Menus (Slidebars)” has been translated into 1 locale. Thank
you to [the translators](https://translate.wordpress.org/projects/wp-plugins/off-canvas-sidebars/contributors)
for their contributions.
[Translate “Off-Canvas Sidebars & Menus (Slidebars)” into your language.](https://translate.wordpress.org/projects/wp-plugins/off-canvas-sidebars)
### Interested in development?
[Browse the code](https://plugins.trac.wordpress.org/browser/off-canvas-sidebars/),
check out the [SVN repository](https://plugins.svn.wordpress.org/off-canvas-sidebars/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/off-canvas-sidebars/)
by [RSS](https://plugins.trac.wordpress.org/log/off-canvas-sidebars/?limit=100&mode=stop_on_copy&format=rss).
## Changelog
#### 0.5.9
* **Enhancement:** Refactor settings import to use textarea input.
* **Fix:** Only trigger import/export tab handlers on init.
* **Security:** Proper import nonce validation.
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/123)
#### 0.5.8.5
* **Hotfix:** Security fix (administrators only).
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/122)
#### 0.5.8.4
* **Hotfix:** Security fix (registered users with edit capabilities only).
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/121)
#### 0.5.8.3
Invalid release.
#### 0.5.8.2
* **Hotfix:** Security fix (contributor+ users only).
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/119)
#### 0.5.8.1
* **Fix:** Incomplete merge of JS code.
* **Enhancement:** Link close option is now opt-in.
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/117)
#### 0.5.8
* **New:** Filter `ocs_enable_frontend`, modify enable frontend setting.
* **New:** Filter `ocs_enable_assets`, can be used to disable frontend assets.
[#114](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/114)
* **New:** Filter `ocs_inline_styles`, modify the plugin inline styles.
* **Enhancement:** Improve init handler for frontend.
* **Enhancement:** Changed the default hooks for easier onboarding as the WP core
hooks are now supported by most themes.
* **Enhancement:** Improve adding inline styles.
* **Enhancement:** Add `rel="nofollow"` XFN attribute to link type element triggers.
[#116](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/116)
* **Fix:** JS multiple events as string param.
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/111)
#### 0.5.7.1
* **Fix:** Class concatenation bug. [#104](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/104)(
Props: [Samuele Mancuso](https://github.com/AllWorkNoPlay-95))
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/108)
#### 0.5.7
* **Enhancement:** Improved compatibility with the toolbar and fixed elements (
legacy CSS mode).
* **Enhancement:** Update to data attributes.
* **Enhancement:** New filter `ocs_sidebar_attributes`.
* **Enhancement:** New filter `ocs_sidebar_element`.
* **Enhancement:** Added event action manager.
* **Enhancement:** Do not add the same triggers again on reinit.
* **Enhancement:** Load widget admin assets in site head instead of each widget
separately.
* **UI** Use WP meta box functions for setting pages to enhance UI compatibility.
* **Fix:** Set slidebars script to plugin version to prevent browser cache issues.
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/99)
#### 0.5.6
* **Feature:** Overwrite hook priority within the plugin settings.
* **Feature:** Basic theme hook setup validator. [#95](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/95)
* **Enhancement:** Reorder settings page fields.
* **Enhancement:** Improve Slidebars init and allow reinit.
* **Enhancement:** Added `ocs_default_settings` and `ocs_default_sidebar_settings`
filters.
* **Fix:** Make sure sidebars correctly overwrite global settings. [#91](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/91)
* **Fix:** Escape all translated strings for HTML.
* **Fix:** Add `rel="noopener noreferrer"` to all links that open in a new tab.
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/92)
#### 0.5.5
* **Compatibility**: Changed the CSS to be compatible with `position: sticky;`
elements. [#83](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/83)
* **Compatibility**: Fix default before and after widget args. Widget element changed
to `` instead of `
`. [#88](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/88)
* **Enhancement**: Late init option. [#81](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/81)
* **Enhancement**: Allow minimum value of 0 for numeric settings.
* **Fix**: Gutenberg notice that OCS couldn’t be initialized.
* **UI**: Rename control elements to triggers (uniform names).
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/84)
#### 0.5.4
* **Compatibility:** Support `wp_body_open` as `website_before` hook introduced
in WordPress 5.2. [#70](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/70)
* **Enhancement:** Allow Genesis Framework hooks to be overwritten in respect for`
wp_body_open`.
* **Enhancement:** Use CSS `vh` unit for canvas container min-height instead of
JavaScript.
* **Enhancement:** Better use of WP core UI elements.
* **Enhancement:** Code quality improvements.
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/71)
#### 0.5.3
* **Enhancement:** Don’t render triggers of disabled sidebars if auto-hide is enabled.
[#56](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/56)
* **Enhancement:** Support `wp_footer` as `website_after` hook. (Not compatible
with all themes!)
* **Enhancement:** Filters to overwrite `website_before` and `website_after` hook
priorities.
* **Enhancement:** Do not render inactive trigger buttons if auto-hide is enabled.
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/58)
#### 0.5.2
* **Feature:** New filter: `ocs_is_sidebar_enabled` to filter whether a sidebar
should be rendered or not.
* **Enhancement/Refactoring:** Class autoloader.
#### 0.5.1
* **Fix:** Bug with creating sidebars on a new installation. [#52](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/52)
* **Enhancement/Refactoring:** Control trigger rendering.
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/53)
#### 0.5
* **Feature:** Make closing the slidebar after clicking a link an option. [#47](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/47)&
[#48](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/48)
* **Feature:** Add icon options in control trigger API and shortcode.
* **Feature:** Enhance widget UI with advanced options for control triggers. [#27](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/27)
* **Enhancement:** Setting page JS and UI enhancements.
* **Enhancement:** Use data attributes to conform [W3C HTML5 specifications](http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes).
[#50](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/50)
* **Enhancement:** Add support links on plugins overview page.
* **Refactoring:** Separate classes for tabs, page and settings/validation. Enhances
plugin option validation. [#38](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/38)
* **Refactoring:** Global OCS_DOMAIN constant.
* **Updated/Added:** Screenshots.
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/36)
#### 0.4.2
* **Enhancement:** Keep scrollbar visible when scroll lock is active. [#44](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/44)&
[PR #45](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/45)
* **Enhancement:** (Slidebars library) Make sure that percentage based widths are
rounded to actual pixels to prevent 1px differences on display.
* **Fix:** PHP Notice on `fixed_elements` key.
* **Compatibility:** Tested with WordPress 4.9
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/43)
#### 0.4.1
* **Fix:** Loading the correct menu in an off-canvas sidebar was not working correctly.
[#37](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/37)
* **Fix:** Scroll lock feature with CSS instead of JavaScript. [#39](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/39)
* **Enhancement:** Add active sidebar ID to the html element classes. [#41](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/41)
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/40)
#### 0.4
* **Feature:** `[ocs_trigger]` shortcode to display trigger buttons/elements anywhere
you like, [click here for documentation](https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Shortcodes).
[#24](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/24)
- Shortcode generator available in the settings page.
- Integrate a shortcode generator with the WP Editor. [#32](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/32)
* **Enhancement:** New “Legacy CSS” mode. Modified the Slidebars library to support
older CSS2 animations. Can fix a lot of issues with fixed elements. [#26](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/26)
* **Compatibility:** Modified the default Slidebars CSS to support anchor links
and common smooth scroll implementations.
* **Compatibility:** Some enhancements for compatibility with the WP Admin Bar.
* **UI:** Improve widget UI [#27](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/27)
* **Fix:** Enhance the codebase to be more aligned with the WP coding standards
with CodeClimate.
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/25)
#### 0.3.1.1
* **Fix:** Settings page checkbox bug when saving
#### 0.3.1
* **Feature:** Allow changing this plugin capability to show the settings page
* **Fix:** Update fixed element compat for the new Slidebars version (still experimental,
Slidebars still doesn’t fully support fixed elements within the site container)
* **Fix:** Don’t echo empty sidebar CSS selectors if no styles are set
* **UI:** Set `.ocs-button` to `cursor: pointer;` by default
* Update textdomain hook
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/23)
#### 0.3
* **Feature:** Allow sidebars to overwrite some general settings
* **Feature:** Option to set padding to sidebars
* **Feature:** Option to choose other content types than only a WP sidebar for
an off-canvas sidebar
* **Feature:** Option to set your own CSS prefix (some classes are fixes to `ocs`
and can’t be changed, the prefix `ocs` is also the default prefix for new installations)
* **Feature:** Added various actions, filters and JS hooks – [Click here for info](https://github.com/JoryHogeveen/off-canvas-sidebars/wiki)
* **Feature:** OCS API functions to output off canvas sidebars in your theme instead
of using this plugin frontend functions – [Click here for info](https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/PHP-API)
* **Fix:** Sidebar ID validation wasn’t correct
Detailed info: [PR on GitHub](https://github.com/JoryHogeveen/off-canvas-sidebars/pull/10)
#### 0.2.2
* **Feature:** Option to set the animation speed for sidebars
* **Feature:** Option to use the FastClick library – [Click here for info](https://github.com/JoryHogeveen/off-canvas-sidebars/issues/9)
* **Fix:** Disabling sidebars on global settings page didn’t work
#### 0.2.1
* **Fix:** Add touch events for iOS mobile device compatibility
* **Enhancement:** Added some actions for front-end (see Other Notes)
#### 0.2.0.1
* **Fix:** Global variable bug
* **UI:** Improve settings page
#### 0.2
* Update Slidebars plugin to v2.0.2: [click here for info](https://www.adchsm.com/slidebars/features/)
* **Feature:** An unlimited amount of off-canvas sidebars (No longer just one left,
one right)
* **Feature:** 2 new locations (top and bottom)
* **Feature:** 2 new effects (reveal and shift)
* **UI:** Improved settings pages
* **I18n:** Translations are now managed at [translate.wordpress.org](https://translate.wordpress.org/projects/wp-plugins/off-canvas-sidebars)
* Screenshots updated
* Tested with WordPress 4.6
#### 0.1.2
* **Feature:** First experiment for compatibility with fixed elements within the
site container with the use of `transform: translateZ` (needed for `-webkit-`
and `-moz-` only). [See problem here](http://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform)
* **Improvement:** Usage of a single instance of the class
#### 0.1.1
* **Feature:** Added the option to change the website_before and website_after
hook names
#### 0.1
Created from nothingness just to be one of the cool kids. Yay!
## Meta
* Version **0.5.9**
* Last updated **2 months ago**
* Active installations **1,000+**
* WordPress version ** 4.1 or higher **
* Tested up to **6.8.5**
* PHP version ** 5.4 or higher **
* Languages
* [Dutch](https://nl.wordpress.org/plugins/off-canvas-sidebars/) and [English (US)](https://wordpress.org/plugins/off-canvas-sidebars/).
* [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/off-canvas-sidebars)
* Tags
* [menus](https://fuc.wordpress.org/plugins/tags/menus/)[off-canvas](https://fuc.wordpress.org/plugins/tags/off-canvas/)
[sidebars](https://fuc.wordpress.org/plugins/tags/sidebars/)[widgets](https://fuc.wordpress.org/plugins/tags/widgets/)
* [Advanced View](https://fuc.wordpress.org/plugins/off-canvas-sidebars/advanced/)
## Ratings
4.8 out of 5 stars.
* [ 36 5-star reviews ](https://wordpress.org/support/plugin/off-canvas-sidebars/reviews/?filter=5)
* [ 0 4-star reviews ](https://wordpress.org/support/plugin/off-canvas-sidebars/reviews/?filter=4)
* [ 0 3-star reviews ](https://wordpress.org/support/plugin/off-canvas-sidebars/reviews/?filter=3)
* [ 0 2-star reviews ](https://wordpress.org/support/plugin/off-canvas-sidebars/reviews/?filter=2)
* [ 2 1-star reviews ](https://wordpress.org/support/plugin/off-canvas-sidebars/reviews/?filter=1)
[Your review](https://wordpress.org/support/plugin/off-canvas-sidebars/reviews/#new-post)
[See all reviews](https://wordpress.org/support/plugin/off-canvas-sidebars/reviews/)
## Contributors
* [ Jory Hogeveen ](https://profiles.wordpress.org/keraweb/)
## Support
Got something to say? Need help?
[View support forum](https://wordpress.org/support/plugin/off-canvas-sidebars/)
## Donate
Would you like to support the advancement of this plugin?
[ Donate to this plugin ](https://www.keraweb.nl/donate.php?for=off-canvas-sidebars)