Off-Canvas Example

Off-Canvas Overview

Off-canvas panels are fixed-position surfaces that slide in from any edge of the viewport. They are controlled with a single overlay element and two helper functions: toggleOffCanvas(id) and closeAllOffCanvas().

New to Off-Canvas Panels?

Get up and running in 5 minutes with our Quick Start Guide!

View Quick Start Guide

Markup pattern

A trigger that calls toggleOffCanvas('panelId')
A shared overlay with id="offCanvasOverlay"
One or more panels with:
- class="off-canvas">
- id="panelId" (matches the trigger call)
- data-off-canvas="right|left|top|bottom"

Theming data attributes

data-off-canvas-bg – panel background color
data-off-canvas-heading – color for headings inside the panel
data-off-canvas-text – color for paragraph text
data-off-canvas-size – optional width/height (e.g. 360px or 50%)
data-off-canvas-shadow – optional edge shadow color; use "none" to remove the glow.

All content inside the panel can use standard RSL grids and cards — it’s just another container in the layout.

Download RSL Example Pack

Demo: Panels from All Sides

These buttons open off-canvas panels from each edge of the viewport. Each panel contains a small Responsive Slot Layout grid to show how RSL content behaves inside the drawer.


Demo: Panels from All Sides

    These buttons open off-canvas panels from each edge of the viewport. Each panel contains a small
    Responsive Slot Layout grid to show how RSL content behaves inside the drawer.

Workspace Settings

Appearance

Toggle dark mode, accent color, and density. These tiles use the same RSL field patterns shown in the form examples.

RSL grid inside off-canvas

This two-column grid collapses to a single column at small breakpoints, just like any other RSL layout.

Navigation

This panel is configured with data-off-canvas="left" and a custom width using data-off-canvas-size="380px".

Notifications

A top drawer works well for time-sensitive alerts or quick context that sits above the main page content.

This drawer uses data-off-canvas="top" and a height of 320px via data-off-canvas-size.








    
        Workspace Settings
        
    
    
        
            
                Appearance
                
                    Toggle dark mode, accent color, and density. These tiles use the same RSL field
                    patterns shown in the form examples.
                
            
            
                
                    RSL grid inside off-canvas
                    
                        This two-column grid collapses to a single column at small breakpoints,
                        just like any other RSL layout.
                    
                
            
        
    




    
        Navigation
        
    
    
        
            
                
                    Dashboard
                    Projects
                    Team
                    Billing
                
            
            
                
                    
                        This panel is configured with data-off-canvas="left" and a custom
                        width using data-off-canvas-size="380px".
                    
                
            
        
    




    
        Notifications
        
    
    
        
            
                
                    A top drawer works well for time-sensitive alerts or quick context that sits above the
                    main page content.
                
            
            
                
                    
                        This drawer uses data-off-canvas="top" and a
                        height of 320px via data-off-canvas-size.
                    
                
            
        
    




    
        Quick Actions
        
    
    
        
            
                
            
            
                
            
            
                
            
            
                
            
        
        
            The bottom drawer spans the full width using RSL slots to lay out quick actions.

♿ Accessibility Quick Notes

The overlay is clickable to close and uses aria-hidden to signal visibility.
Each panel uses role="dialog", aria-modal="true", and aria-labelledby.
Esc closes any open panel via off-canvas.js.
When a panel opens, the first focusable element inside is focused for keyboard users.

Off Canvas Examples

Off-Canvas Overview

New to Off-Canvas Panels?

Demo: Panels from All Sides

Demo: Panels from All Sides

♿ Accessibility Quick Notes