Drawer Dialog

A drawer is a dialog that slides in from the side of the screen. In Vanilla Breeze any <dialog> with data-position automatically gains drawer geometry, slide-in animation, and reduced-motion handling. You inherit everything native <dialog> provides: focus trapping, Esc to close, role="dialog", and a proper backdrop.

Key features:

• Native <dialog> with focus trapping and Esc to close
• Slides from start, end, top, or bottom
• Trigger via the Invokers API — no inline JS required
• Scrollable body via <section> with overscroll containment built in

A right-side drawer with header, scrollable body, and footer actions. Uses the Invokers API to open and close — no event handlers to wire up.

A left-side drawer for mobile navigation. Use data-position="start" for conventional left-side navigation.

Four edges are supported out of the box. See Dialog › Drawer Variants for the full attribute table and bottom-sheet drag gestures.

• Don’t re-style the drawer. The canonical dialog CSS already handles geometry, border-radius, animation, and reduced motion. Adding a .drawer class or redefining these rules will drift and break theme overrides.
• Use <section> for the body. VB pins overflow-y: auto and overscroll-behavior: contain on dialog[data-position] > section so scrolling inside the drawer never bubbles to the page.
• Width: defaults to min(90vw, 28rem) for side drawers. Override on a per-drawer basis with a local class if you need a wider panel.
• Click outside to dismiss: attach a one-liner dialog.addEventListener('click', e => e.target === dialog && dialog.close()) if needed.
• Animation: slide animations are token-driven (--motion-enter-duration, --ease-out) and automatically collapse to a fade for prefers-reduced-motion.