Off-Canvas

Quick start guide and documentation

What are Off-Canvas Panels?

Off-canvas panels are fixed-position surfaces that slide in from any edge of the viewport. Perfect for:

5-Minute Setup

1 Include Files

Required Files • HTML

2 Add Overlay (once per page)

Overlay Element • HTML

3 Create Off-Canvas Panel

Panel from Left • HTML

4 Add Trigger Button

Trigger Button • HTML
✓ Done! Your off-canvas panel slides in from the left with overlay and close functionality.

Four Panel Positions

1. Left Panel (Navigation)

Most common for mobile menus

Code • HTML

2. Right Panel (Shopping Cart)

Perfect for shopping carts and secondary actions

Code • HTML

3. Top Panel (Notifications)

Good for notification centers and announcements

Code • HTML

4. Bottom Panel (Filters)

Mobile-friendly filters and options

Code • HTML

Quick Reference

CSS Classes

ClassPurpose
.off-canvasBase class for all panels
.off-canvas-leftSlides from left edge
.off-canvas-rightSlides from right edge
.off-canvas-topSlides from top edge
.off-canvas-bottomSlides from bottom edge
.off-canvas-headerPanel header section
.off-canvas-bodyScrollable content area
.off-canvas-closeClose button styling
.off-canvas-overlayBackground overlay

JavaScript Functions

FunctionPurpose
toggleOffCanvas('id')Open/close specific panel by ID
closeAllOffCanvas()Close all open panels

Pro Tips

✨ Tip 1: Use left panels for primary navigation, right panels for secondary actions like carts
✨ Tip 2: Always include a close button—some users prefer explicit controls over clicking overlay
✨ Tip 3: Keep panel content scrollable with .off-canvas-body for long lists
✨ Tip 4: Don't nest off-canvas panels—use one at a time for best UX
✨ Tip 5: Test on mobile devices—panels should be touch-friendly with adequate tap targets

ADA Compliance

RSL Off-Canvas panels include accessibility features:

  • ✅ Keyboard accessible (Esc closes panel)
  • ✅ Focus trapped inside open panel
  • ✅ Close button has proper ARIA labels
  • ✅ Overlay click closes panel
  • ✅ Proper semantic HTML structure