Build responsive off-canvas menus, drawers, and popups in WordPress using a lightweight Gutenberg block with advanced triggers and animations.

Chandrakant

Gaurav Bhardva

Drawer Sliding

The Drawer Sliding plugin displays content, HTML, shortcodes, menus, and carts, with horizontal sliding options to the left or right.

Rahi Saiful

themelooks

Mehedi Hasan

Quicknav

Short Description: Quicknav adds off-canvas menus, products, blogs, and links for easy site navigation.

Freemius

Abu Hayat

bPlugins

Charles Cormier

asadsuzan

<p>OffCanvas / Drawer is a flexible and lightweight WordPress Gutenberg block that lets you create slide-in drawers, off-canvas menus, and popup panels that open from the left, right, top, or bottom of the screen.</p>
<p>Perfect for mobile menus, WooCommerce cart drawers, newsletter popups, announcements, and custom sidebar content — all without writing a single line of code.</p>
<p>The block supports InnerBlocks, shortcode generation, complete styling controls, and advanced trigger options. It works with any WordPress theme, is fully responsive, and optimized for performance.</p>
<h3>Use OffCanvas for:</h3>
<ul>
<li>Mobile off-canvas menus</li>
<li>WooCommerce cart & checkout drawers</li>
<li>Promotional and announcement popups</li>
<li>Contact forms & lead-generation panels</li>
<li>Help, support, and documentation sidebars</li>
<li>Newsletter signup panels</li>
<li>App-style bottom sheets</li>
<li>Slide-in alerts and notifications</li>
</ul>
<p>Lightweight, SEO-friendly, and built for both beginners and professionals.</p>
<h3>Free Features:</h3>
<h4>OffCanvas Drawer Settings</h4>
<ul>
<li>Drawer positions: Left, Right, Top, Bottom</li>
<li>Built-in trigger button </li>
<li>Shortcode generator with clipboard copy </li>
<li>Prevent body scroll when drawer is open</li>
<li>Backdrop overlay support</li>
</ul>
<h4>Trigger Button Customization:</h4>
<ul>
<li>Button alignment (Block-level control)</li>
<li>Typography controls  </li>
<li>Text & icon support</li>
<li>Color settings  </li>
<li>Margin & spacing  </li>
<li>Shadow controls  </li>
<li>Ripple effect animation on click </li>
</ul>
<h4>Close Button Customization:</h4>
<ul>
<li>Colors controls  </li>
<li>Size settings  </li>
<li>Shadow support </li>
<li>Custom close icon support </li>
<li>Close button position control </li>
</ul>
<h4>Popup & Panel Design:</h4>
<ul>
<li>Background: Solid, Gradient, Image</li>
<li>Header styling (title typography & colors) </li>
<li>Close icon styling </li>
<li>Popup header background control </li>
<li>Toggle popup header visibility </li>
<li>Popup header title position control </li>
</ul>
<h4>Content Support:</h4>
<ul>
<li>Full InnerBlocks support (add any Gutenberg block inside)  </li>
<li>Use anywhere via shortcode</li>
</ul>
<h3>Advanced Design Controls</h3>
<ul>
<li>Backdrop color & opacity control</li>
<li>Popup animation & transition types:
<ul>
<li>Default</li>
<li>Slide</li>
<li>Fade</li>
<li>Push</li>
<li>Reveal</li>
<li>Zoom ✅ (New)</li>
<li>Flip ✅ (New)</li>
<li>Bounce ✅ (New)</li>
</ul>
</li>
<li>Configurable animation duration (ms)  ✅ (New)</li>
<li>Animation easing presets including: ✅ (New)
<ul>
<li>ease</li>
<li>ease-in</li>
<li>ease-out</li>
<li>ease-in-out</li>
<li>linear</li>
</ul>
</li>
<li>Backdrop blur control support ✅ (New)</li>
<li>Direction control: Left, Right, Top, Bottom  </li>
<li>Custom width & height  </li>
<li>Button border, radius, padding & hover styles  </li>
<li>Icon size, color, hover color & position</li>
</ul>
<h3>Pro Features</h3>
<h4>Smart Triggers & User Behavior:</h4>
<ul>
<li>Custom trigger selector (open with any external element) </li>
<li>Show or hide built-in trigger button</li>
<li>Toggle mode (same trigger opens & closes)  </li>
<li>Close on outside click </li>
<li>Trigger frequency control </li>
<li>Delay trigger (open after X seconds)</li>
<li>Scroll depth trigger (open at X% scroll)  </li>
<li>Scroll into view trigger</li>
<li>Inactivity trigger  </li>
<li>Exit intent detection (desktop)</li>
</ul>
<h3>How to Use</h3>
<ol>
<li>Install and activate the <strong>OffCanvas Block</strong> plugin. </li>
<li>Open the Gutenberg editor in your WordPress dashboard. </li>
<li>Add the <strong>OffCanvas Block</strong> from the Widgets category.  </li>
<li>Customize the trigger button, popup panel, background, typography, and interactions from the settings panel.</li>
<li>Add your desired content inside the block using InnerBlocks.</li>
<li>Save and publish your page.</li>
</ol>
<p><strong><em>Need help installing? Check the Installation tab for step-by-step guidance.</em></strong></p>


OffCanvas / Drawer – Responsive Slide-In Drawer & Popup System


This plugin works great, exactly as expected! It's easy to use, optimized, and lightweight.


Alternatives to OffCanvas / Drawer – Responsive Slide-In Drawer & Popup System

Top alternatives