Accessible Offcanvas

Positions

Offcanvas can be positioned from the left, right, top, or bottom

Navigation Menu

Typical use case of offcanvas for mobile navigation

Wide Variant

Wider version for more detailed content

With Form

Offcanvas with focus trap works perfectly with forms

Usage

Basic HTML Structure:

<!-- Trigger button -->
<button data-offcanvas-trigger="my-offcanvas">Open</button>

<!-- Offcanvas -->
<div data-offcanvas id="my-offcanvas">
    <div data-position="left" data-offcanvas-panel>
        <div data-offcanvas-header>
            <h2 data-offcanvas-title>Title</h2>
            <button data-offcanvas-close aria-label="Close">×</button>
        </div>

        <div data-offcanvas-body>
            Offcanvas content...
        </div>
    </div>

    <div data-offcanvas-backdrop></div>
</div>

JavaScript Initialization:

1. ES6 Module Import - init functions (Recommended)

import { initOffcanvas } from './a11y-kit/a11y-offcanvas.js';

// Initialize after DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  initOffcanvas();
});

2. ES6 Module Import - Bootstrap Style

import { Offcanvas } from './a11y-kit/a11y-offcanvas.js';

const offcanvas = new Offcanvas(element, {
    closeOnBackdrop: true,
    closeOnEscape: true,
    trapFocus: true,
    scrollLock: true,
    onOpen: (instance) => console.log('Opened'),
    onClose: (instance) => console.log('Closed')
});

3. NPM package (Module bundlers: Astro, Vite, Webpack)

npm install accessible-kit

// Import only what you need (best for tree-shaking)
import { initOffcanvas, Offcanvas } from 'accessible-kit/offcanvas';

// Initialize after DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  initOffcanvas(); // Auto-init all offcanvas

  // OR create instances manually
  const offcanvas = new Offcanvas(element, options);
});

Positions:

<!-- From left -->
<div data-position="left" data-offcanvas-panel>...</div>

<!-- From right -->
<div data-position="right" data-offcanvas-panel>...</div>

<!-- From top -->
<div data-position="top" data-offcanvas-panel>...</div>

<!-- From bottom -->
<div data-position="bottom" data-offcanvas-panel>...</div>

<!-- Wide variant -->
<div data-position="left" data-width="wide" data-offcanvas-panel>...</div>

Features

• ✅ Full ARIA attributes support (role="dialog", aria-modal="true")
• ✅ Focus trap - Tab cycles only through elements in offcanvas
• ✅ Return focus - Returns focus to trigger after closing
• ✅ Scroll lock - Locks body scrolling
• ✅ Escape to close
• ✅ Backdrop click to close
• ✅ 4 positions (left, right, top, bottom)
• ✅ Configurable behavior
• ✅ Responsive design
• ✅ Dark mode support
• ✅ Reduced motion support