Offcanvas

Installation

# Standalone
npm install @strata-packages/offcanvas

# With Strata (already included in strata.components.js — do not install separately)
npm install strata-css

Usage

Standalone (no Strata CSS)

<link  rel="stylesheet" href="node_modules/@strata-packages/offcanvas/offcanvas.css">
<script src="node_modules/@strata-packages/offcanvas/offcanvas.js"></script>

With Strata CSS

<script src="node_modules/strata-css/dist/strata.components.js"></script>

Available as Strata.Offcanvas.open() / Strata.Offcanvas.close().

HTML Structure

Two attributes drive everything — JS never touches classes:

Attribute	Purpose	Values
data-st-side	Slide direction — set once in HTML, CSS-driven	left / right / top / bottom
aria-hidden	Open/close state — JS only updates the value	"true" / "false"

<!-- Trigger -->
<button data-st-toggle="offcanvas" data-st-target="#myDrawer">Open</button>

<!-- Drawer (slides from the right) -->
<div id="myDrawer" class="offcanvas" data-st-side="right" aria-hidden="true" aria-modal="false">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Title</h5>
    <button data-st-dismiss="offcanvas">&times;</button>
  </div>
  <div class="offcanvas-body">
    Content here.
  </div>
</div>

Direction Variants

Set data-st-side on the .offcanvas element — CSS handles the rest:

data-st-side	Slides in from
left	Left
right	Right
top	Top
bottom	Bottom

Programmatic API

// Standalone
StrataOffcanvas.open('#myDrawer')
StrataOffcanvas.close()

// With Strata
Strata.Offcanvas.open('#myDrawer')
Strata.Offcanvas.close()

// Pass element directly
Strata.Offcanvas.open(document.getElementById('myDrawer'))

Static Backdrop

Prevents closing on backdrop click:

<div class="offcanvas" data-st-side="right" data-st-backdrop="static" aria-hidden="true" aria-modal="false">

Events

document.addEventListener('st:offcanvas:open', function (e) {
  console.log('opened:', e.detail.offcanvas)
})

document.addEventListener('st:offcanvas:close', function (e) {
  console.log('closed:', e.detail.offcanvas)
})

Dynamic Direction

Set data-st-side before calling open() — JS never touches it, so it is always safe to change:

const drawer = document.getElementById('myDrawer')
drawer.setAttribute('data-st-side', 'left')
Strata.Offcanvas.open(drawer)

---

Documentation

Full API reference, options and live examples: https://strata-css-docs-site.vercel.app/packages/offcanvas

@strata-packages/offcanvas is part of Strata CSS — a JIT CSS framework that pairs Bootstrap-style component classes with Tailwind-style on-demand generation, cascade layers instead of !important, variants (hover:, group-hover:, peer-checked:), arbitrary values and three built-in themes.

• Framework docs — https://strata-css-docs-site.vercel.app
• Source and issues — https://github.com/AftabIbrahimKazi/strata
• Framework on npm — strata-css

Other Strata packages

Package	What it does
@strata-packages/chart	Three.js chart component. Works standalone or with Strata CSS.
@strata-packages/cursorfx	Modular cursor effects — one shared engine, ten opt-in presets. Works standalone or with Strata CSS.
@strata-packages/flipbook	PDF and HTML flipbook viewer with page-flip animation. Works standalone or with Strata CSS.
@strata-packages/forms	Interactive form controls for Strata CSS — custom select with every variant developers need.
@strata-packages/modal	Lightweight modal component. Works standalone or with Strata CSS.
@strata-packages/picker	Date, time, and datetime picker for Strata CSS. Works standalone or with Strata.
@strata-packages/shopmap	Lightweight, theme-aware map component with terrain, hypsometric tinting, and procedural hillshading. Zero API keys. Free for commercial use.
@strata-packages/skeleton-loader	Lightweight skeleton loader plugin. Works standalone or with Strata CSS.

---

License

MIT © Aftab Ibrahim Kazi