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-blockpost 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
- Open the Gutenberg editor on any page, post, or template.
- Click the + icon (Add Block) and search for OffCanvas.
- Insert the block and configure position, trigger, and styling in the inspector sidebar.
- Fill the content area with any Gutenberg blocks and publish.
- 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.