Drawers

Structure

Panels that slide in from an edge. Four sides, two modes, no z-index management — and the animation needs no JavaScript.

Start here

A drawer is a panel anchored to an edge of the screen. There is one decision to make: should it demand attention, or sit alongside the page?

Modal — a <dialog>. It dims the page behind it, traps focus, and makes the rest inert. Use it when the drawer is the only thing that matters right now: navigation on mobile, a confirmation, a focused task.

Non-modal — a <div popover>. The page stays live behind it. Use it when the page is context the user still needs: filters, settings, a form referencing visible content.

Both slide and animate identically. Only the modality differs.

Four positions

Add .left, .right, .top, or .bottom to choose the edge. Open one and watch it slide.

<dialog class="drawer left">…</dialog>
<dialog class="drawer right">…</dialog>
<dialog class="drawer top">…</dialog>
<dialog class="drawer bottom">…</dialog>

Modal drawer

A <dialog class="drawer …"> opened with showModal(). The backdrop dims, focus is trapped inside, and the page is inert until it closes. Closing on the backdrop and the Esc key come free with <dialog>.

<dialog id="nav" class="drawer left">…</dialog>

<button onclick="document.getElementById('nav').showModal()">
  Open
</button>

Non-modal drawer

A <div popover class="drawer …"> opened by a button's popovertarget. No script at all — the popover attribute wires the button to the panel. The page behind stays interactive.

<div id="filters" popover class="drawer right">…</div>

<button popovertarget="filters">Filters</button>

No onclick, no listener. The browser connects the button to the panel through the matching id.

Chrome inside a drawer

For a drawer with its own header, scrolling body, and footer, compose it with .hero. The .drawer class handles position and animation; .hero handles the internal layout. They stack cleanly.

<dialog class="drawer left hero stage">
  <div class="top">…search + close…</div>
  <div class="main">…scrolling links…</div>
  <div class="bottom">…user info…</div>
</dialog>

As many as you need

Drawers live in the browser's top layer, above the page and above each other in open order. There is no z-index to manage and no stacking to plan. Put a drawer on every edge if the design calls for it — they simply work.

Each is independent. None of them needed a z-index, and opening one never fights another.

toolbox