Skip to content

Slide-over

Preview Available in release assets

Present a focused editing task beside wide content and as a bottom sheet on narrow viewports.

Slide-over in context

Show code
<p><a href="/account/profile/"  data-dialog-open="profile-panel">Edit profile</a></p>
<dialog class="thin-slide-over" id="profile-panel" aria-labelledby="profile-panel-title">
  <header>
    <h2 id="profile-panel-title">Profile</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>Update the public details associated with your account.</p>
    <form id="profile-form" action="/account/profile/" method="post" class="thin-stack">
      <label class="thin-field">Display name<input class="thin-input" name="display-name" autocomplete="name" />
    </label>
    <label class="thin-field">Biography<textarea class="thin-textarea" name="bio">
  </textarea>
</label>
</form>
</div>
<footer>
  <button class="thin-button" type="submit" form="profile-form">Save profile</button>
</footer>
</dialog>

Anatomy

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

Variants and sizes

  • Responsive slide-over
  • Editor
  • Detail panel

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-slide-over 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