Drawer · kit

Example

Show the markup

<div class="kit-cluster">
  <button class="kit-button" commandfor="demo-drawer" command="show-modal">Open drawer</button>
  <button class="kit-button" commandfor="demo-drawer-start" command="show-modal">From the start</button>
</div>
<dialog class="kit-dialog kit-drawer" id="demo-drawer" aria-labelledby="demo-drawer-title" closedby="any">
  <header class="kit-dialog-header"><h2 id="demo-drawer-title">Drawer title</h2><button class="kit-button" data-variant="ghost" data-icon type="button" commandfor="demo-drawer" command="close" aria-label="Close"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" aria-hidden="true"><path d="m4 4 8 8m0-8-8 8"/></svg></button></header>
  <div class="kit-dialog-body kit-stack">
    <div class="kit-field"><label for="demo-drawer-a">Label</label><select class="kit-select" id="demo-drawer-a"><option>Option one</option><option>Option two</option></select></div>
    <fieldset class="kit-fieldset"><legend>Group label</legend><label class="kit-choice"><input type="checkbox" class="kit-checkbox" checked> Option one</label><label class="kit-choice"><input type="checkbox" class="kit-checkbox"> Option two</label></fieldset>
  </div>
  <footer class="kit-dialog-footer"><button class="kit-button" type="button" commandfor="demo-drawer" command="close">Cancel</button><button class="kit-button" data-variant="primary" type="button" commandfor="demo-drawer" command="close" value="apply">Apply</button></footer>
</dialog>
<dialog class="kit-dialog kit-drawer" id="demo-drawer-start" data-side="start" aria-labelledby="demo-drawer-start-title" closedby="any">
  <header class="kit-dialog-header"><h2 id="demo-drawer-start-title">Drawer title</h2><button class="kit-button" data-variant="ghost" data-icon type="button" commandfor="demo-drawer-start" command="close" aria-label="Close"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" aria-hidden="true"><path d="m4 4 8 8m0-8-8 8"/></svg></button></header>
  <div class="kit-dialog-body"><p>Supporting text. This drawer opens from the start edge.</p></div>
</dialog>

Usage

<button class="kit-button" commandfor="filters" command="show-modal">Filters</button>
<dialog class="kit-dialog kit-drawer" id="filters" aria-labelledby="filters-title" closedby="any">
  <header class="kit-dialog-header"><h2 id="filters-title">Filters</h2>…</header>
  <div class="kit-dialog-body">…</div>
  <footer class="kit-dialog-footer">…</footer>
</dialog>

A drawer is a dialog with kit-drawer added, so it opens and closes the same way and needs the dialog's CSS and script. It sits at the end edge, right on left-to-right pages, or at the start with data-side="start". data-size="lg" makes it 40rem wide. The body scrolls; the header and footer stay put.

Accessibility

Everything from the dialog applies: the page behind is inert, focus is kept inside, Escape closes it and focus returns to the opener.
It slides in unless the person prefers reduced motion.
On phones it leaves a strip of the page showing, so it's clear it's on top of something and the backdrop can be tapped to close it (with closedby="any").