Anthony Carbon

<p>WDES Responsive Mobile Menu is a developer friendly WordPress responsive mobile menu. Providing easy access within your website in mobile with mobile friendly layout.</p>
<p>Give your mobile visitor a best experience using WDES Responsive Mobile Menu and not bored because they cannot access any pages on your site. This plugin has very flexible design in any mobile screen and no conflict CSS/JS to your theme.</p>
<p>You can manage styles, logo, etc. via admin options. This plugin is automatically running (if enabled in admin option) without doing any backend coding from several themes like WPCargo, Genesis, Outreach Pro, Executive Pro, Extended Pro, The7, Avada, Canvas, and Jupiter.</p>
<p>If your current themes is not mentioned above, you can still use WDES Responsive Mobile Menu by just adding the <code>wdes_responsive_mobile_menu()</code> function after the body opening tags. Normally this can be found in header.php of your theme template.</p>
<h4>Example:</h4>
<pre><code><body>
<?php wdes_responsive_mobile_menu(); ?>
</code></pre>
<h4>WDES Responsive Mobile Menu Demo Site</h4>
<p><a href="https://responsivetool.anthonycarbon.com" rel="nofollow ugc">Responsive Tool</a>.</p>
<h4>Features</h4>
<ul>
<li>Can select one of the <code>Navigation Menus</code> created in menu dashboard. Default is the menu that is set as primary.</li>
<li>It has <code>Header Top</code> section where you can add your <code>phone number</code>, <code>email address</code>, and <code>social networks</code>. This is displayed above your site logo and navigation menu.</li>
<li>Manage the <code>site logo</code>, <code>Background Color</code>, <code>Text Color</code>, <code>Text Font Size</code>, border, etc in WDES Responsive Mobile Menu page options.</li>
<li><code>Custom CSS</code> where you can add you custom CSS codes (if needed).</li>
<li><code>Import/Export</code> options.</li>
<li>More available layouts in <a href="https://www.anthonycarbon.com/product-category/wdes-responsive-mobile-menu-layout-add-ons/" rel="nofollow ugc">WDES Responsive Mobile Menu Layouts</a>.</li>
</ul>
<h4>Related plugins</h4>
<p><a href="https://www.anthonycarbon.com/product-category/wordpress-plugins/" rel="nofollow ugc">Anthony Carbon Plugins</a></p>
<h4>Develop by</h4>
<p><a href="https://www.anthonycarbon.com/" rel="nofollow ugc">anthonycarbon.com – WordPress Developer / Programmer</a></p>
<p>Happy coding everyone :D.</p>


WDES Responsive Mobile Menu

Nice Mobile Menu

WDES Responsive Mobile Menu is a developer friendly WordPress responsive mobile menu. Providing easy access within your website in mobile with mobile  …

Freemius

Abu Hayat

bPlugins

Charles Cormier

asadsuzan

<p>OffCanvas / Drawer is a flexible, highly customizable, and lightweight WordPress Gutenberg block that lets you design slide-in drawers, off-canvas navigation menus, and popup panels that slide in from any direction: left, right, top, or bottom.</p>
<p>Perfect for mobile navigation menus, WooCommerce shopping cart sidebars, newsletters, exit-intent popups, slide-out contact forms, site announcements, and help desks — all without writing a single line of code.</p>
<p>Built natively for the WordPress Block Editor, it supports InnerBlocks, meaning you can place any other Gutenberg blocks (paragraphs, images, forms, custom widgets) directly inside the OffCanvas drawer. It also features a custom shortcode generator allowing you to save layouts and embed them anywhere on your site using the <code>[offcanvas-block id="POST_ID"]</code> shortcode.</p>
<p>The plugin is fully responsive, SEO-friendly, performance-optimized, and built to integrate seamlessly with any WordPress theme.</p>
<h3>Key Features</h3>
<ul>
<li><strong>Native Gutenberg Block</strong>: Full visual integration inside the WordPress Block Editor.</li>
<li><strong>InnerBlocks Supported</strong>: Drop any block inside the drawer, including forms, menus, widgets, and shortcodes.</li>
<li><strong>Shortcode Generator</strong>: Save and reuse your OffCanvas templates anywhere via copy-to-clipboard shortcodes.</li>
<li><strong>4-Direction Slide-Ins</strong>: Position drawers on the Left, Right, Top, or Bottom of the viewport.</li>
<li><strong>Smart Auto Triggers</strong>: Trigger popups based on user behavior (time delay, scroll depth, exit-intent, inactivity, and selector in-view).</li>
<li><strong>Responsive Layouts</strong>: Set device-specific positions, slide directions, and dimensions for desktop, tablet, and mobile devices.</li>
<li><strong>Touch & Swipe Gestures</strong>: Smooth, native-feeling mobile interactions with swipe-to-open and swipe-to-close capabilities.</li>
<li><strong>Custom Positioned FAB</strong>: Floating Action Button triggers with precise offset controls and drag-and-drop editor positionin</li>
</ul>
<h3>Free Features</h3>
<h4>Core Layout & Spacing</h4>
<ul>
<li><strong>Four Direction Placements</strong>: Position the offcanvas panel at the Left, Right, Top, or Bottom edge of the screen.</li>
<li><strong>Default Trigger Button</strong>: Use the built-in trigger button to toggle the panel open and closed.</li>
<li><strong>Body Scroll Lock</strong>: Prevent background body scrolling when the OffCanvas panel is active.</li>
<li><strong>Standard Backdrop Toggle</strong>: Enable a dark overlay backdrop behind the active panel.</li>
</ul>
<h4>Trigger Button Customization</h4>
<ul>
<li><strong>Block Alignment</strong>: Left, Center, or Right alignments for block-level buttons.</li>
<li><strong>Typography Controls</strong>: Adjust font size, font family, and font weight.</li>
<li><strong>Colors & Typography</strong>: Full customization of button text color and background color.</li>
<li><strong>Ripple Click Effect</strong>: Optional ripple animation effect on clicking the trigger.</li>
<li><strong>Margin Controls</strong>: Fine-tune trigger button outer margins.</li>
</ul>
<h4>Close Button Customization</h4>
<ul>
<li><strong>Flexible Color Picker</strong>: Pick color and background values for the close icon.</li>
<li><strong>Size & Shadow</strong>: Adjust the scale (px) and shadow styling of the close button.</li>
<li><strong>Predefined Placements</strong>: Place the close button in the Top-Right, Top-Left, Bottom-Right, or Bottom-Left corners.</li>
</ul>
<h4>Header & Typography</h4>
<ul>
<li><strong>Editable Drawer Header</strong>: Customize the text of the header title.</li>
<li><strong>Title Styling</strong>: Control title typography (font size, weight) and colors.</li>
<li><strong>Header Spacing</strong>: Customize the header background color and visibility options.</li>
</ul>
<h4>Templates & Shortcodes</h4>
<ul>
<li><strong>Shortcode Builder</strong>: A dedicated custom post type <code>offcanvas-block</code> lets you create drawers, save them, and copy the shortcode <code>[offcanvas-block id="..."]</code> directly from the admin dashboard list.</li>
<li><strong>InnerBlocks Compatibility</strong>: Full freedom to place text, images, sliders, newsletters, and third-party plugin blocks inside the drawer.</li>
</ul>
<h3>Pro Features</h3>
<p>Upgrade to OffCanvas Pro to unlock advanced targeting, styling, and behavior controls:</p>
<h4>Floating Action Button (FAB) Trigger</h4>
<ul>
<li><strong>Corner Anchor Placements</strong>: Place the trigger as a Floating Action Button in the Bottom-Right, Bottom-Left, Top-Right, or Top-Left corners.</li>
<li><strong>Custom Absolute Positioning</strong>: Position the FAB anywhere on the screen. Features drag-and-drop editor control with a smart 8px Euclidean threshold to prevent accidental shifts on clicking.</li>
<li><strong>Offsets & Layouts</strong>: Adjust X and Y offset values to ensure perfect alignments.</li>
<li><strong>Visual Effects</strong>: Set button size, icon size, borders, border radius, pulse animations, custom shadows, and hover transitions.</li>
<li><strong>Rotation Angle</strong>: Rotate the FAB to match vertical triggers or layout designs.</li>
</ul>
<h4>Smart Auto Triggers & Behavior</h4>
<ul>
<li><strong>Exit Intent Detection</strong>: Trigger the OffCanvas panel automatically when the user’s cursor leaves the viewport on desktop.</li>
<li><strong>After Time Delay</strong>: Open the drawer automatically after a configurable delay (in seconds/minutes).</li>
<li><strong>Scroll Depth Trigger</strong>: Open the panel when a visitor scrolls down a specific percentage (e.g. 50%) of your page.</li>
<li><strong>While Target Section in View</strong>: Detect when a specific HTML selector (Class or ID) scrolls into the viewport to trigger the drawer.</li>
<li><strong>On Inactivity</strong>: Display the popup after a period of user inactivity.</li>
<li><strong>Trigger Frequency Controls</strong>: Limit triggers to show Always, Once per session (sessionStorage), or Once per day (localStorage) to avoid visitor frustration.</li>
</ul>
<h4>External Custom Trigger</h4>
<ul>
<li><strong>Custom Selectors</strong>: Bind the OffCanvas drawer to any custom link, menu item, or button on your page by inputting its Class or ID (e.g. <code>.my-custom-button</code> or <code>#open-drawer-link</code>).</li>
<li><strong>Hide Default Trigger</strong>: Keep the built-in trigger button hidden when using custom CSS selectors.</li>
</ul>
<h4>Advanced Animations & Transitions</h4>
<ul>
<li><strong>Premium Transition Types</strong>: Slide, Fade, Push, Reveal, Zoom, Flip, and Bounce effects.</li>
<li><strong>Configurable Duration</strong>: Set exact transition entry and exit duration times in milliseconds (100ms – 5000ms).</li>
<li><strong>Easing Presets</strong>: Smooth easing animations (ease, ease-in, ease-out, ease-in-out, linear).</li>
</ul>
<h4>Responsive Mobile Optimizations</h4>
<ul>
<li><strong>Mobile-Specific Placement</strong>: Set a different position for mobile screens (e.g., Slide-in Right on desktop, Bottom Sheet on mobile).</li>
<li><strong>Mobile Slide Direction</strong>: Override the slide-in animation direction specifically for mobile layout visitors.</li>
<li><strong>Touch & Swipe Gestures</strong>: Smooth swipe-to-open and swipe-to-close touch controls for mobile screens.</li>
</ul>
<h4>Premium Design Customization</h4>
<ul>
<li><strong>Responsive Dimensions</strong>: Customize the panel width and height independently for Desktop, Tablet, and Mobile screens.</li>
<li><strong>Advanced Backdrop Blur</strong>: Customize backdrop overlay color, transparency opacity, and apply modern CSS backdrop-filter blur effects (0px – 30px).</li>
<li><strong>Custom Close Button Icon</strong>: Upload or input any custom SVG string to replace the default close button icon.</li>
<li><strong>Borders & Hover Spacing</strong>: Custom borders, border radius, and hover state box-shadows on trigger buttons.</li>
</ul>


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


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


Great as expected!

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

WDES Responsive Mobile Menu vs OffCanvas / Drawer – Responsive Slide-In Drawer & Popup System