Title: OffCanvas / Drawer – add sleek slide-in panels to any page Author: bPlugins Published: August 3, 2022 Last modified: August 6, 2026 --- Search plugins ![](https://ps.w.org/offcanvas-block/assets/banner-772x250.png?rev=3623309) ![](https://ps.w.org/offcanvas-block/assets/icon.svg?rev=3623309) # OffCanvas / Drawer – add sleek slide-in panels to any page By [bPlugins](https://profiles.wordpress.org/bplugins/) [Download](https://downloads.wordpress.org/plugin/offcanvas-block.2.0.6.zip) [Live Preview](https://vec.wordpress.org/plugins/offcanvas-block/?preview=1) * [Details](https://vec.wordpress.org/plugins/offcanvas-block/#description) * [Reviews](https://vec.wordpress.org/plugins/offcanvas-block/#reviews) * [Installation](https://vec.wordpress.org/plugins/offcanvas-block/#installation) * [Development](https://vec.wordpress.org/plugins/offcanvas-block/#developers) [Support](https://wordpress.org/support/plugin/offcanvas-block/) ## Description [**OffCanvas**](https://bplugins.com/products/offcanvas-block/) | [**Pricing**](https://bplugins.com/products/offcanvas-block/pricing) | [**Support**](https://bplugins.com/support/) | [**Demo**](https://bplugins.com/products/offcanvas-block/#demos) Create high-converting popups, slide-in panels, and responsive navigation drawers inside the WordPress block editor (Gutenberg) with ease. OffCanvas / Drawer is a lightweight, performance-optimized **WordPress popup plugin** and **Gutenberg popup** builder. It allows you to design custom **OffCanvas menus**,** drawer menus**, side panels, and interactive popups that slide in or fade in from any viewport direction: left, right, top, or bottom. Whether you need a sleek **mobile menu**, a **WooCommerce cart drawer**, an **exit intent popup** to recover abandoned carts, custom slide-out contact forms, site announcements, or an interactive help desk—this plugin does it all without requiring you to write a single line of code. ### Built Natively for Gutenberg (Block Editor) Designed specifically for the block editor, it supports full InnerBlocks integration. You can drop any Gutenberg block (paragraphs, images, headings, contact forms, navigation blocks, or custom widgets) directly inside the **slide-in panel**. It also features a built-in shortcode generator, allowing you to save layouts as templates and embed them anywhere on your website using a simple shortcode. ### Smart Behavior, Triggers & Targeting Go beyond basic popups. Trigger drawers based on visitor actions like scroll depth, time delay, user inactivity, element visibility, or exit intent. With advanced targeting rules, you can display or hide popups on specific pages, target specific user roles, and schedule marketing campaigns with timezone-aware start and end dates. ### Dedicated Analytics Dashboard Track how your **floating popups** and **slide menus** perform. The built-in Analytics dashboard measures impressions, conversions, and conversion rates, giving you the insights you need to optimize your layout and strategy. ### Silky-Smooth Animations & Device Optimization Provide a premium user experience with responsive positioning (e.g., a slide-in side panel on desktop, and a mobile bottom sheet on phones), touch/swipe gesture controls, and independent opening and closing transition effects. Add a modern backdrop blur filter to keep your content in focus. The plugin is fully responsive, SEO-friendly, exceptionally lightweight, and built to integrate seamlessly with any WordPress theme. ### Key Features * **Native Gutenberg Block**: Design your slide-in panels visually inside the WordPress Block Editor with live preview. * **InnerBlocks Integration**: Place any block inside the drawer, including forms, navigation, WooCommerce blocks, and custom shortcodes. * **Shortcode Generator**: Save and reuse OffCanvas designs globally using a clean shortcode manager. * **Advanced Smart Triggers**: Open panels automatically based on exit-intent, scroll depth, time delay, element visibility, or user inactivity. * **Advanced Targeting & Scheduling**: Show or hide popups on specific pages, target user roles, and schedule campaigns with timezone support. * **Built-in Analytics**: Monitor impressions, conversions, and conversion rates with a dedicated, beautiful dashboard. * **Independent Close Animations**: Customize exit transition animation types, easing, and duration separate from opening transitions. * **Responsive Layouts & Mobile Gestures**: Set device-specific positions (e.g., mobile bottom sheets) and support smooth touch swipe gestures. * **Floating Action Button (FAB)**: Custom trigger buttons that anchor to screen corners with drag-and-drop builder positioning. * **Aesthetic Backdrop Filters**: Style the background overlay with custom colors, opacity levels, and modern backdrop blur effects. ### Free Features #### Layout & Positioning * **Four-Direction Placements**: Set the slide-in drawer to slide from the Left, Right, Top, or Bottom edge of the screen. * **Default Trigger Button**: Toggle the drawer panel open or closed with a customizable inline button. * **Body Scroll Lock**: Prevent background body scrolling when the OffCanvas panel is active to improve readability. * **Standard Backdrop Overlay**: Enable a dark overlay backdrop behind the active panel to draw focus to content. #### Trigger Button Customization * **Block Alignment**: Align the trigger button to the Left, Center, or Right within your page layout. * **Typography Controls**: Adjust the font size, font family, and font weight of the button text. * **Color Customization**: Full control over trigger button text and background colors (normal and hover states). * **Ripple Click Effect**: Add an optional modern material ripple animation on click. * **Margin Controls**: Fine-tune trigger button outer margins for perfect page alignment. #### Close Button Customization * **Flexible Styling**: Pick custom colors and backgrounds for the close icon to fit your branding. * **Size & Shadow**: Adjust the close button scale (in pixels) and box shadow. * **Predefined Placements**: Anchor the close button to the Top-Right, Top-Left, Bottom-Right, or Bottom-Left corners. #### Header & Typography Styling * **Editable Drawer Header**: Customize the text of the header title to greet or direct visitors. * **Title Styling**: Control header typography (font size, font weight) and text colors. * **Header Spacing & Background**: Customize header background color, padding, and visibility options. #### Templates & Shortcode Generator * **Dedicated Shortcode Builder**: Create drawers, save them as global templates, and copy the shortcode `[offcanvas-block id="..."]` from the dashboard list. * **InnerBlocks Compatibility**: Drop native Gutenberg blocks, WooCommerce widgets, or contact forms into the drawer content. ### Pro Features Upgrade to OffCanvas Pro to unlock advanced targeting, styling, and behavior controls to build professional marketing campaigns: #### Analytics & Performance Tracking * **Dedicated Analytics Dashboard**: Monitor impressions, conversions, and conversion rates directly in WordPress. * **Impression Tracking**: Keep track of how many times each slide-in panel or popup is viewed. * **Conversion Rate Measurement**: Understand which drawers convert the best with automatic calculation of conversion rates. #### Advanced Targeting & Scheduling * **Page-Level Targeting**: Show or hide popups on specific pages, posts, or custom post types. * **User Role Targeting**: Display targeted drawers only to logged-in users, administrators, authors, editors, customers, or guests. * **Campaign Scheduling**: Schedule campaign popups to automatically start and end at specific dates and times. * **Timezone Support**: Set schedules based on your WordPress site’s timezone or UTC for accurate global campaigns. #### Smart Auto Triggers * **Exit Intent Detection**: Trigger the slide-in drawer automatically when the user’s cursor moves to leave the viewport on desktop. * **After Time Delay**: Open the panel automatically after a configurable delay( in seconds or minutes). * **Scroll Depth Trigger**: Open the panel when a visitor scrolls down a specific percentage (e.g., 50%) of your page. * **Target Section in View**: Open the drawer automatically when a specific CSS selector (Class or ID) scrolls into the viewport. * **On Inactivity**: Display the popup after a period of user inactivity to re- engage visitors. * **Trigger Frequency Controls**: Limit popup visibility (Always, Once per session, Once per day) using sessionStorage and localStorage to prevent visitor fatigue. #### Floating Action Button (FAB) Trigger * **Corner Anchor Placements**: Place the trigger as a Floating Action Button in the Bottom-Right, Bottom-Left, Top-Right, or Top-Left corners. * **Custom Absolute Positioning**: Position the FAB anywhere on the screen with drag-and-drop editor control. Features a smart 8px Euclidean threshold to prevent accidental shifts. * **Offset & Layout Controls**: Adjust X and Y offset values to ensure perfect alignments with other screen elements. * **Visual Effects**: Set button size, icon size, border radius, pulse animations, custom shadows, and hover transitions. * **Rotation Angle**: Rotate the FAB to match vertical triggers or layout designs. #### Animations & Transition Controls * **Premium Transition Types**: Slide, Fade, Push, Reveal, Zoom, Flip, and Bounce effects. * **Push**: Displaces the page by the panel’s own size while the panel travels in alongside it, so the page and panel move together. * **Configurable Opening Transitions**: Set entry duration times in milliseconds( 100ms – 5000ms) and select easing presets (ease, ease-in, ease-out, ease-in-out, linear). * **Independent Close Animations**: Customize exit transitions with a separate exit animation type, duration, and easing, or choose to reuse the opening animation. #### Mobile & Touch Optimizations * **Mobile-Specific Placement**: Override the panel position specifically for mobile devices (e.g., Slide-in Right on desktop, Bottom Sheet on mobile). * **Mobile Slide Direction**: Customize slide-in directions specifically for mobile visitors. * **Touch & Swipe Gestures**: Smooth, native-feeling swipe-to-open and swipe-to- close controls on touch devices. #### Premium Design & Backdrop Blur * **Responsive Dimensions**: Customize the panel width and height independently for Desktop, Tablet, and Mobile screens. * **Layered Backdrop Material**: A saturated blur pane, your own tint colour, and a soft depth wash that clears toward the panel — depth and focus rather than a flat dark overlay, with custom overlay colours, opacity and blur (0px – 30px). * **Custom Close Button Icon**: Upload or input any custom SVG string to replace the default close button icon. * **Borders & Hover Shadows**: Add custom borders, border radius, and hover state box-shadows on trigger buttons. #### External Custom Trigger * **Custom Selectors**: Bind the OffCanvas drawer to any custom link, menu item, or button by inputting its Class or ID (e.g., `.my-custom-button` or `#open-drawer- link`). * **Hide Default Trigger**: Keep the built-in trigger button hidden when using custom CSS selectors to trigger the panel. ## Screenshots [⌊Default OffCanvas drawer displaying inner Gutenberg blocks.⌉⌊Default OffCanvas drawer displaying inner Gutenberg blocks.⌉[ Default OffCanvas drawer displaying inner Gutenberg blocks. [⌊Responsive position configurations (Left, Right, Top, Bottom).⌉⌊Responsive position configurations (Left, Right, Top, Bottom).⌉[ Responsive position configurations (Left, Right, Top, Bottom). [⌊Custom Trigger Selector settings for binding external CSS classes/IDs.⌉⌊Custom Trigger Selector settings for binding external CSS classes/IDs.⌉[ Custom Trigger Selector settings for binding external CSS classes/IDs. [⌊Smart Auto Trigger: Target Section in View.⌉⌊Smart Auto Trigger: Target Section in View.⌉[ Smart Auto Trigger: Target Section in View. [⌊Smart Auto Trigger: Scroll Depth Trigger.⌉⌊Smart Auto Trigger: Scroll Depth Trigger .⌉[ Smart Auto Trigger: Scroll Depth Trigger. [⌊Smart Auto Trigger: Exit Intent Detection.⌉⌊Smart Auto Trigger: Exit Intent Detection .⌉[ Smart Auto Trigger: Exit Intent Detection. [⌊Smart Auto Trigger: Time-based Delay Trigger.⌉⌊Smart Auto Trigger: Time-based Delay Trigger.⌉[ Smart Auto Trigger: Time-based Delay Trigger. [⌊Smart Auto Trigger: User Inactivity Trigger.⌉⌊Smart Auto Trigger: User Inactivity Trigger.⌉[ Smart Auto Trigger: User Inactivity Trigger. ## Blocks This plugin provides 1 block. * OffCanvas Display content box from the left, right, or bottom edge of the viewport ## Installation #### From the WordPress Dashboard 1. Navigate to **Plugins Add New**. 2. Search for **OffCanvas Block**. 3. Click **Install Now** and then **Activate**. #### Manual Installation 1. Download the plugin ZIP file from the WordPress Plugin Directory. 2. Log in to your WordPress admin dashboard and go to **Plugins Add New Upload Plugin**. 3. Choose the ZIP file, upload, and click **Activate**. #### Adding the Block 1. Open the Gutenberg editor on any page, post, or template. 2. Click the **+** icon (Add Block) and search for **OffCanvas**. 3. Click to insert it, configure settings in the inspector sidebar, and populate the content area with Gutenberg blocks. ## FAQ ### Does this block work with Full Site Editing (FSE)? Yes! OffCanvas Block is fully compatible with block-based themes and FSE templates, headers, footers, and page layouts. ### Can I use the OffCanvas drawer as a WooCommerce mini-cart? Yes. You can insert the WooCommerce Cart block (or any cart block/shortcode) inside the OffCanvas content area and use the CPT shortcode to trigger it from your main menu cart button. ### How do I open the OffCanvas panel from a theme navigation menu link? In the Pro version, you can assign a custom class (e.g., `open-my-drawer`) to your navigation menu item in WordPress, and enter that selector (`.open-my-drawer`) in the **Custom Trigger Selector** setting. ### Can I limit how often the popup triggers appear to a single user? Yes. The Pro version includes a Smart Trigger Frequency control, allowing you to limit trigger appearances to “Once per session” or “Once per day” utilizing local storage and session storage. ### What happens if I have multiple OffCanvas blocks on the same page? The plugin handles multiple instances perfectly. Each block generates its own unique wrapper class and isolated trigger events. In version 2.0.4+, smart triggers also use block-specific storage keys to prevent collisions. ### Can I schedule popups for specific campaigns? Yes! In the Pro version, you can set a start and end date/time for your campaigns with timezone-aware scheduling, making it perfect for limited-time promotions, holiday sales, and announcements. ### How does the Analytics dashboard work? In the Pro version, the plugin includes a lightweight Analytics system that tracks impressions, conversions, and conversion rates. A conversion is recorded whenever the user triggers a conversion action inside the panel. This data is displayed in a clean dashboard within your WordPress admin panel. ## Reviews ![](https://secure.gravatar.com/avatar/0e84c8b4db84189bc72c59e206f100b748ec4cb325c494546f3188ff4a901008? s=60&d=retro&r=g) ### 󠀁[Great as expected!](https://wordpress.org/support/topic/simplify-your-site/)󠁿 [Monowar Hossain](https://profiles.wordpress.org/kstmonowar/) June 4, 2024 This plugin works great, exactly as expected! It’s easy to use, optimized, and lightweight. [ Read all 1 review ](https://wordpress.org/support/plugin/offcanvas-block/reviews/) ## Contributors & Developers “OffCanvas / Drawer – add sleek slide-in panels to any page” is open source software. The following people have contributed to this plugin. Contributors * [ bPlugins ](https://profiles.wordpress.org/bplugins/) * [ Abu Hayat ](https://profiles.wordpress.org/abuhayat/) * [ Charles Cormier ](https://profiles.wordpress.org/charlescormier/) * [ asadsuzan ](https://profiles.wordpress.org/asadsuzan/) * [ Freemius ](https://profiles.wordpress.org/freemius/) [Translate “OffCanvas / Drawer – add sleek slide-in panels to any page” into your language.](https://translate.wordpress.org/projects/wp-plugins/offcanvas-block) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/offcanvas-block/), check out the [SVN repository](https://plugins.svn.wordpress.org/offcanvas-block/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/offcanvas-block/) by [RSS](https://plugins.trac.wordpress.org/log/offcanvas-block/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 2.0.6 (August 02, 2026) * New: Added an Analytics Dashboard to track OffCanvas impressions, trigger clicks, and conversion rates from a dedicated admin page. * New: Added independent Close Transition controls with separate animation type, duration, and easing options, or the ability to reuse the opening animation. * New: Added Advanced Targeting Rules, including page targeting, user role conditions, page exclusions, and timezone-aware campaign scheduling. * Improved: Refined the popup transition workflow with a cleaner and more intuitive settings experience. * Improved: Redesigned the backdrop with a premium layered blur effect for better depth, focus, and visual polish, while remaining fully compatible with existing Background, Opacity, Blur, and Z-Index settings. * Improved: Rebuilt the Push transition with a smoother, more natural page displacement animation that automatically applies to existing Push transitions without requiring any changes. * Fixed: Backdrop fade animations are now synchronized with popup open and close transitions for a smoother experience. * Fixed: Backdrop opacity values of `0` are now handled correctly instead of falling back to the default opacity. * Fixed: Exit animations now complete correctly even when transition durations exceed 600ms. #### 2.0.5 (23 May, 2026) * Added device-specific drawer positions for mobile devices. * Added Floating Action Button (FAB) trigger system with advanced styling and positioning controls. * Added mobile swipe gesture support for opening and closing drawers. * Added independent slide directions for mobile devices. * Added device-specific smart auto trigger controls for mobile devices. * Added customizable Z-index controls for drawer panels and backdrops. * Added advanced backdrop styling controls including blur and opacity support. * Improved Gutenberg editor dimension controls for mobile positions. * Fixed smart trigger frequency handling for delay-based triggers. * Fixed multi-instance smart trigger conflicts on the same page. * Fixed manual panel closing restrictions when observed elements are visible. #### 2.0.4 (07 Apr, 2026) * Fix: Resolved license activation check issue by improving class existence validation. * Fix: Fixed broken link in the upgrade modal. * Update: Improved Inspector Controls for a more intuitive and user-friendly experience. #### 2.0.3 (22 Feb, 2026) * Update: Redesigned and modernized admin dashboard interface. #### 2.0.2 (17 Feb, 2026) * New: Added contextual info notes to explain advanced settings and features. * New: Introduced new popup animation types: Zoom, Flip, and Bounce. * New: Added Backdrop blur control support. * New: Added Configurable animation duration(ms). * New: Added Animation easing presets. * Update: Improved validation for custom trigger and smart trigger selectors (class/ ID input). * Update: Enhanced user guidance for Custom Trigger and Smart Auto Trigger options. * Fix: Prevented invalid selector errors from breaking the editor. * Refactor: Removed unnecessary and duplicate logic to improve performance and maintainability. #### 2.0.1 (02 Jan, 2026) * New: Added ripple effect support to the trigger button. * New: Added support for custom close button icons and position controls. * New: Extended popup header options with background control, visibility toggle, and title position settings. * Update: Renamed Trigger Button PanelBody Title for better clarity. * Update: Moved trigger button alignment control to block settings. #### 2.0.0 – 26 Nov 2025 Major Upgrade: New interaction system, smart triggers, design controls, and improved UI/UX. #### 1.0.1 – 30 Sep 2024 * Fix: Close button icon visibility. #### 1.0.0 * Initial Release. ## Meta * Version **2.0.6** * Last updated **4 days ago** * Active installations **900+** * WordPress version ** 6.5 or higher ** * Tested up to **7.0.3** * PHP version ** 7.1 or higher ** * Language * [English (US)](https://wordpress.org/plugins/offcanvas-block/) * Tags * [block](https://vec.wordpress.org/plugins/tags/block/)[drawer](https://vec.wordpress.org/plugins/tags/drawer/) [offcanvas](https://vec.wordpress.org/plugins/tags/offcanvas/)[popup](https://vec.wordpress.org/plugins/tags/popup/) [slide menu](https://vec.wordpress.org/plugins/tags/slide-menu/) * [Advanced View](https://vec.wordpress.org/plugins/offcanvas-block/advanced/) ## Ratings 5 out of 5 stars. * [ 1 5-star review ](https://wordpress.org/support/plugin/offcanvas-block/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/offcanvas-block/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/offcanvas-block/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/offcanvas-block/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/offcanvas-block/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/offcanvas-block/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/offcanvas-block/reviews/) ## Contributors * [ bPlugins ](https://profiles.wordpress.org/bplugins/) * [ Abu Hayat ](https://profiles.wordpress.org/abuhayat/) * [ Charles Cormier ](https://profiles.wordpress.org/charlescormier/) * [ asadsuzan ](https://profiles.wordpress.org/asadsuzan/) * [ Freemius ](https://profiles.wordpress.org/freemius/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/offcanvas-block/) ## Donate Would you like to support the advancement of this plugin? [ Donate to this plugin ](https://www.buymeacoffee.com/abuhayat)