Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Drawers
Overlays

Drawers

Drawers patterns built with StyloftCSS and native HTML.

CSS only1 examplesKeyboard friendly HTML

Drawer

A modal side panel with native focus containment and CSS slide transitions.

Live preview

Example side drawer

This native dialog supports Escape, keyboard focus containment and return to the opener. Connect application actions separately.

View HTML / PlaygroundHTML source
example.htmlHTML
<button type="button" class="sl-btn" commandfor="ref-drawer" command="show-modal">
  Open drawer
</button>
<dialog class="sl-dialog sl-drawer" id="ref-drawer" aria-labelledby="ref-drawer-title">
  <div class="sl-dialog__head">
    <h3 id="ref-drawer-title" class="sl-text-xl">Example side drawer</h3>
    <button
      class="sl-close"
      type="button"
      commandfor="ref-drawer"
      command="close"
      aria-label="Close Example side drawer"
    >
      ×
    </button>
  </div>
  <div class="sl-stack">
    <p>
      This native dialog supports Escape, keyboard focus containment and return to the
      opener. Connect application actions separately.
    </p>
    <button class="sl-btn" type="button" commandfor="ref-drawer" command="close">
      Close example
    </button>
  </div>
</dialog>
HTML source · enable JavaScript for the playground26 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.