← Back to gallery
CSS

Responsive Dialog Side Sheet

A native <dialog> side sheet that slides in from the right, restores focus to the opener, and respects Escape / backdrop / reduced-motion behaviors.

Duration
1s
Resolution
1440×900
Format
CSS
drawerside-sheetdialogslide-infocus-restore

Modal transition / <dialog> / side sheet

Responsive dialog side sheet

Reimplements a side-sheet drawer that slides in from the edge, traps focus, closes on Escape or backdrop click, and respects prefers-reduced-motion.

settings drawer — 360px · 0.28s

Right-side configuration

Settings Drawer

A native <dialog> drawer slides in from the right with backdrop blur. Escape, backdrop click, and explicit Close all dismiss.

  • settings
  • right
  • native dialog

Left-side filters

Filter Sheet

A filter panel slides in from the left for list-heavy pages, pairing the sheet with a Done button that closes and returns focus to the trigger.

  • filter
  • left
  • focus restore

Wide right-side panel

Cart Slide-In

A wider cart drawer with a slower entry feels weightier; the increased width makes line-item details readable without a second route.

  • cart
  • wide
  • slow

Side sheet inspector

Settings Drawer

Open the sheet, then tweak width and duration.

Width
360px
Slide
0.28s

The drawer inherits <dialog>'s top-layer placement and focus containment, with transform-based entry animation layered on top.

css
.side-sheet {
  inset: 0;
  inset-right: 0;
  width: 360px;
  max-width: 90vw;
  margin-right: 0;
  border: none;
  background: var(--surface);
  padding: 24px;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              overlay 0.28s allow-discrete,
              display 0.28s allow-discrete;
}

.side-sheet[open] {
  transform: translateX(0);
}

@starting-style {
  .side-sheet[open] {
    transform: translateX(100%);
  }
}

.side-sheet::backdrop {
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: reduce) {
  .side-sheet { transition-duration: 0s; }
}