OffCanvas / Drawer – add sleek slide-in panels to any page

Description

Design slide-in drawers, off-canvas menus, and popup panels that glide in from any edge of the screen – without writing a single line of code.

OffCanvas | Pricing | Support | Demo

Why OffCanvas / Drawer?

OffCanvas / Drawer is a flexible, highly customizable, and lightweight Gutenberg block that lets you build slide-in drawers, off-canvas navigation menus, and popup panels that slide in from any direction: left, right, top, or bottom.

Built natively for the WordPress Block Editor, it supports InnerBlocks – place any other Gutenberg blocks (paragraphs, images, forms, custom widgets) directly inside the drawer. A custom shortcode generator lets you save layouts and embed them anywhere on your site using the [offcanvas-block id="POST_ID"] shortcode.

The plugin is fully responsive, SEO-friendly, performance-optimized, and built to integrate seamlessly with any WordPress theme – perfect for mobile navigation menus, WooCommerce shopping cart sidebars, newsletters, exit-intent popups, slide-out contact forms, site announcements, and help desks.

Free Features

• Native Gutenberg Block: Full visual integration inside the WordPress Block Editor.
• InnerBlocks Supported: Drop any block inside the drawer, including forms, menus, widgets, and shortcodes.
• Four Direction Placements: Position the panel at the Left, Right, Top, or Bottom edge of the screen.
• Shortcode Builder: A dedicated offcanvas-block post type lets you create drawers, save them, and copy the [offcanvas-block id="..."] shortcode from the admin dashboard list.
• Default Trigger Button: Built-in trigger button with alignment, typography, colors, ripple click effect, and margin controls.
• Close Button Customization: Color, background, size, shadow, and predefined corner placements (Top-Right, Top-Left, Bottom-Right, Bottom-Left).
• Editable Drawer Header: Customize the header title text, typography, colors, background, and visibility.
• Body Scroll Lock: Prevent background scrolling while the panel is active.
• Standard Backdrop Toggle: Enable a dark overlay backdrop behind the active panel.

Pro Version

Upgrade to OffCanvas Pro to unlock advanced targeting, styling, and behavior controls:

• Floating Action Button (FAB) Trigger: Corner anchor placements, custom absolute positioning with drag-and-drop editor control, X/Y offsets, pulse animations, shadows, hover transitions, and rotation angle.
• Smart Auto Triggers: Exit-intent detection, time delay, scroll depth, target-section-in-view, and inactivity triggers.
• Trigger Frequency Controls: Show Always, Once per session, or Once per day to avoid visitor frustration.
• External Custom Trigger: Bind the drawer to any link, menu item, or button via its CSS class or ID (e.g. .my-custom-button), with the option to hide the default trigger.
• Premium Transitions: Slide, Fade, Push, Reveal, Zoom, Flip, and Bounce effects with configurable duration (100ms–5000ms) and easing presets.
• Responsive Mobile Optimizations: Mobile-specific placement and slide direction, plus swipe-to-open and swipe-to-close touch gestures.
• Premium Design Customization: Device-specific panel dimensions, backdrop color/opacity/blur (0–30px), custom SVG close icons, and advanced borders and hover shadows.

How to Use – Quick Start

1. Open the Gutenberg editor on any page, post, or template.
2. Click the + icon (Add Block) and search for OffCanvas.
3. Insert the block and configure position, trigger, and styling in the inspector sidebar.
4. Fill the content area with any Gutenberg blocks and publish.
5. Optional: create a drawer under the offcanvas-block post type and place it anywhere with the [offcanvas-block id="..."] shortcode.

Use Cases

• Mobile Navigation Menus: Slide-out menus that feel native on any device.
• WooCommerce Cart Sidebars: Put a cart block inside the drawer for a mini-cart experience.
• Newsletters & Popups: Exit-intent and scroll-triggered signup panels (Pro).
• Contact Forms & Help Desks: Slide-out forms and support panels available on every page.
• Announcements: Site-wide notices that don’t interrupt the page layout.