Drawer

Slide-in panel using the CSS :has() checkbox proxy — zero JavaScript required. The hidden <input type="checkbox"> is the state machine; <label> elements are the open and close controls.

Right Drawer

Open Drawer

<input type="checkbox" id="nav-drawer" data-drawer hidden>

<label for="nav-drawer" class="primary">Open Drawer</label>

<aside class="drawer">
  <header>
    <h2>Navigation</h2>
    <label for="nav-drawer" aria-label="Close">
      <span class="axicon render" data-name="X"></span>
    </label>
  </header>
  <div>
    <nav><ul>
      <li><a href="/" aria-current="page">Dashboard</a></li>
      <li><a href="/settings">Settings</a></li>
    </ul></nav>
  </div>
</aside>

<label for="nav-drawer" data-backdrop aria-hidden="true"></label>

Left Drawer

<!-- Add data-side="left" for left-side drawer -->
<aside class="drawer" data-side="left">
  <header>...</header>
  <div>...</div>
</aside>

Semantic Structure

Element	Role
`input[type="checkbox"][data-drawer]`	Hidden state machine — checked = drawer open
`label[for="…"]`	Open trigger — native click toggles checkbox
`aside.drawer`	Container — fixed panel, slides in via CSS transition
`aside.drawer > header`	Title + close label row
`aside.drawer > div`	Scrollable content area
`label[data-backdrop]`	Full-viewport overlay — click closes drawer
`data-side="left"`	Slides from left instead of right

Why Zero-JS?

Works when JavaScript is disabled or blocked — no behavioral debt
Native <label>/<input> semantics — keyboard accessible without scripting
CSS :has() state machine — the checkbox is the single source of truth
Clicking the backdrop <label> unchecks the proxy and closes the drawer

Features

Semantic Structure - Built with native HTML5 elements for maximum reliability.
Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
Fully Responsive - Scales perfectly from mobile to desktop screens.
No JS Dependency - Core functionality relies on pure CSS for maximum performance.
Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Drawer component is designed for versatile implementation across modern web applications. Ideal scenarios include:

Dashboards & Admin Panels - Structured data presentation and interface control.
Content Management Systems - Organizing complex information hierarchies and media.
E-Commerce Platforms - Enhancing product discovery and user workflows.
Marketing Sites - Highlighting key product offerings cleanly and effectively.
SaaS Applications - Delivering native-feeling, responsive app experiences.

Accessibility

Axiom01 ensures that the Drawer component meets strict WCAG standards out of the box:

Keyboard Navigation - Fully navigable using standard Tab and Arrow key workflows.
Screen Reader Support - Requires minimal manual ARIA labeling due to semantic HTML roots.
Focus Management - Visible, high-contrast focus indicators without layout shifting.
Color Contrast - OKLCH math guarantees perfect WCAG AAA contrast ratios in both light and dark modes.
Reduced Motion - Respects system-level prefers-reduced-motion settings for any internal animations.