Drawer

Slide-in side panel built on top of native <dialog> semantics. Used for mobile navigation in this docs site, but works as a general-purpose drawer for filters, settings, or off-canvas menus.

The drawer is CSS-driven with a small script that handles open/close, focus management, body scroll lock, and the Escape key. No Vue or framework runtime required — just the Drawer.astro component (or copy the HTML recipe).

Live demo

Default (Medium, Left-aligned)

---
import Drawer from 'spoko-design-system/components/Drawer.astro';
---

<button type="button" class="btn-primary btn-normal" aria-controls="demo-drawer" aria-expanded="false">
Open drawer
</button>

<Drawer id="demo-drawer" label="Settings & Navigation">
<div class="p-6 flex flex-col gap-6">
  <h3 class="text-xl font-textbold mb-4">Navigation</h3>
  <ul class="flex flex-col gap-2">
    <li><a href="#" data-drawer-close>Dashboard</a></li>
    <li><a href="#" data-drawer-close>Products</a></li>
    <li><a href="#" data-drawer-close>Settings</a></li>
  </ul>
  <button type="button" class="btn-secondary btn-sm" data-drawer-close>Close</button>
</div>
</Drawer>

Small Width

<button type="button" class="btn-primary btn-normal" aria-controls="small-drawer" aria-expanded="false">
Open small drawer
</button>

<Drawer id="small-drawer" label="Quick actions">
<div class="p-4 flex flex-col gap-4">
  <h3 class="text-lg font-textbold">Quick Actions</h3>
  <button class="btn-primary btn-sm w-full">Action 1</button>
  <button class="btn-secondary btn-sm w-full" data-drawer-close>Close</button>
</div>
</Drawer>

Large Width

<button type="button" class="btn-primary btn-normal" aria-controls="large-drawer" aria-expanded="false">
Open large drawer
</button>

<Drawer id="large-drawer" label="Detailed panel">
<div class="p-6 flex flex-col gap-6">
  <h3 class="text-xl font-textbold">Order Details</h3>
  <!-- ... detailed content ... -->
  <button type="button" class="btn-secondary w-full" data-drawer-close>Close</button>
</div>
</Drawer>

Right-Aligned

<button type="button" class="btn-primary btn-normal" aria-controls="right-drawer" aria-expanded="false">
Open right drawer
</button>

<Drawer id="right-drawer" label="Side panel" position="right">
<div class="p-6 flex flex-col gap-4">
  <h3 class="text-xl font-textbold">Right Panel</h3>
  <p>This drawer opens from the right edge.</p>
  <button type="button" class="btn-secondary w-full" data-drawer-close>Close</button>
</div>
</Drawer>

Variants

Width Variants

Customize drawer width by overriding the .sds-drawer-panel width via CSS:

Position: Right Side

Pass position="right" to slide from the right edge:

For plain HTML, set data-position="right" on the .sds-drawer element — the built-in stylesheet handles the rest.

Wiring triggers

The drawer auto-discovers its trigger via the aria-controls attribute. Any element with aria-controls="<drawer-id>" opens the matching drawer on click. The script also manages aria-expanded for you.

Closing the drawer

Three built-in ways to close — no extra wiring needed:

Add data-drawer-close to any close button, link, or icon inside the drawer:

Accessibility

The drawer follows the WAI-ARIA modal dialog pattern:

• Panel uses role="dialog" + aria-modal="true"
• aria-label set from the label prop (defaults to "Navigation")
• Focus moves to the panel on open, and returns to the trigger on close
• Body scroll is locked while open (body.drawer-open { overflow: hidden })
• Escape key dismisses the drawer

Always pass a descriptive label when the drawer is not the main navigation — screen readers announce it as the dialog name.

HTML recipe

The drawer is also available as a pure HTML + CSS pattern. Copy this into any framework or plain HTML page that loads the SDS stylesheet:

You also need the open/close logic. If you’re not using the Astro component, import the helper directly:

Props

Use Cases

Navigation Menu

Typical mobile navigation with links. Close drawer on link click via data-drawer-close:

Filters Panel

Form inputs for filtering product lists or search results:

Settings Panel

User preferences and toggles:

Slot

The default slot renders inside the slide-in panel. Style it however you want — the panel itself only provides the positioning, sizing, transition, and scroll container.