Skip to content

Drawer

Preview Available in release assets

Present supporting navigation or commerce content from the inline-end edge.

Drawer in context

Show code
<p><a href="/cart/"  data-dialog-open="cart-drawer">Review cart</a></p>
<dialog class="thin-drawer" id="cart-drawer" aria-labelledby="cart-drawer-title">
  <header>
    <h2 id="cart-drawer-title">Your cart</h2>
    <button class="thin-button" data-variant="quiet" data-size="small" data-icon-only data-dialog-close aria-label="Close panel">
      <svg class="thin-icon" aria-hidden="true">
        <use href="/icons/sprite.svg#x">
        </use>
      </svg>
    </button>
  </header>
  <div data-panel-body class="thin-stack">
    <p>Two items are ready for checkout. Shipping, tax, discounts, and availability will be confirmed before payment.</p>
    <ul>
      <li>Field notes with a deliberately long localized product title <span>$12</span>
    </li>
    <li>Canvas pouch <span>$24</span>
  </li>
</ul>
<p>Your cart stays available at its full-page destination if this panel cannot open.</p>
</div>
<footer class="thin-cluster">
  <a href="/cart/">View full cart</a>
  <form method="dialog">
    <button class="thin-button" value="checkout">Checkout</button>
  </form>
</footer>
</dialog>

Anatomy

  • External link or button trigger
  • Labelled native dialog
  • Header and close control
  • Independently scrolling body
  • Optional footer actions

Variants and sizes

  • Inline-end drawer
  • Cart drawer
  • Navigation drawer

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Closed
  • Open
  • Long content
  • Narrow viewport
  • Right-to-left

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

The shared dialog helper calls showModal(), leaves Escape and focus containment to the native dialog, closes through data-dialog-close or method=dialog, and restores focus to a connected opener.

Accessibility

Use aria-labelledby, keep a visible heading, make the close control's accessible name specific, and retain a normal destination or server workflow outside the panel.

Contract
DIALOG
Basis
Native <dialog> with an explicitly chosen modal/non-modal boundary; no drawer-specific APG role
Behavior guarantees
  • Uses native <dialog> and method="dialog"; the trigger helper only coordinates opening, initial focus, and return focus.
  • Rejects ambiguous or unnamed targets and keeps the authored link fallback when modal presentation is unavailable.
  • Focuses an available control on open and restores a connected trigger after close.
Evidence
  • tests/unit/library/drawer-sheet.test.ts
  • tests/unit/library/advanced-component-contracts.test.ts

API

Use dialog.thin-drawer with direct header, [data-panel-body], and optional footer children. Open it with data-dialog-open and load the existing dialog behavior once per document.

Behavior tier: dependency-free

Custom properties

PropertyDefaultDescription
--thin-sheet-sizemin(100vi, 30rem)Inline size of a drawer or slide-over, and the maximum block size of a sheet. Set it on the dialog.

Fallback

Keep the initiating link and essential destination available in the page; the panel is an optional presentation enhancement.

Assets and dependencies

  • /components.css
  • /layouts.css
  • /behaviors.js
  • /icons/sprite.svg

Dependencies: None

Source: packages/ui/src/items/drawer-sheet/style.ts

Composition

Derived from the examples and style specs, not authored.

Composes