Off-canvas drawer for all four edges with a backdrop layer catalog, push-content mode, swipe-to-close, and focus management.
<link rel="stylesheet" href="https://cdn.get-set.it/gs-drawer/latest/gs-drawer.min.css"> <script src="https://cdn.get-set.it/gs-drawer/latest/gs-drawer.min.js"></script>
import Drawer from '@get-set/gs-drawer'; export default function App() { return ( <Drawer> <div className="content">Your Drawer content</div> </Drawer> ); }
This drawer is a real GSDrawer instance running your current option set.
| Option | Type | Default | Description |
|---|---|---|---|
| reference | string | none | Reference. |
| side | DrawerSide | 'left' | Which edge the drawer is anchored to and slides from. Default: 'left'. |
| size | DrawerSize | 'md' | Size preset (width for left/right, height for top/bottom). Default: 'md'. |
| width | number | string | none | Explicit width (overrides `size` for left/right drawers). Number = px. |
| height | number | string | none | Explicit height (overrides `size` for top/bottom drawers). Number = px. |
| closeOnBackdrop | boolean | true | Close when the backdrop (area outside the panel) is clicked. Default: true. |
| closeOnEsc | boolean | true | Close when Escape is pressed (topmost drawer only). Default: true. |
| persistent | boolean | false | Non-dismissable mode: backdrop click, Esc and the × close button no longer dismiss the drawer (only programmatic close()/closeDrawer()). Default: false. |
| pushContent | boolean | false | Push the page content aside instead of overlaying it. The tagged `pushSelector` element (default `<body>`'s first non-drawer content) is translated by the panel size while the drawer is open. Default: false. |
| pushSelector | HandlerTarget | none | Element(s) to translate when `pushContent` is on. Default: document.body. |
| swipeToClose | boolean | false | Enable edge-drag / swipe-to-close on the panel. Default: false. |
| swipeThreshold | number | 0.4 | Fraction of the panel size (0–1) past which releasing a swipe closes the drawer (otherwise it snaps back open). Default: 0.4. |
| backdrop | boolean | 'static' | true | Backdrop mode. `true` = dimmed, click-to-close. `false` = no overlay. `'static'` = overlay present but click does not close (plays a shake). |
| backdropType | GSDrawerBackdropType | 'dim' | Rich backdrop layer catalog preset. Default: 'dim'. |
| backdropColor | string | none | Overlay color. Default: rgba(17,24,39,.5). |
| backdropOpacity | number | none | Overlay opacity (0–1). Applied as the overlay's alpha. |
| backdropBlur | boolean | number | string | false | Backdrop blur. `true`=8px; number=px; string=raw CSS length. Default: false. |
| animation | GSDrawerAnimation | false | 'slide' | Entrance animation name from the catalog. `false` disables all panel motion. Default: 'slide'. |
| exitAnimation | GSDrawerAnimation | false | none | Separate exit animation name. Defaults to mirroring `animation` when omitted. `false` disables exit motion. |
| animationDuration | number | { enter?: number; exit?: number } | 320 | Animation duration in ms. A number applies to both enter and exit; an object sets each independently. Default: 320. |
| animationEasing | string | 'cubic-bezier(.32,.72,0,1)' | CSS easing applied to the panel enter/exit animation. |
| backdropAnimation | GSDrawerAnimation | false | 'fade' | Backdrop's own animation (independent of the panel). Default: 'fade'. |
| backdropAnimationDuration | number | 240 | Backdrop fade duration in ms. Default: 240. |
| reducedMotion | 'auto' | boolean | 'auto' | Honor `prefers-reduced-motion`. `'auto'` follows the OS setting; `true` always reduces; `false` never reduces. Default: 'auto'. |
| title | string | none | Optional header title. When set, renders a header and wires aria-labelledby. |
| subtitle | string | none | Secondary line shown under the title in the header. |
| footer | string | false | none | Footer area content (HTML string). `false` (default) = no footer. |
| showClose | boolean | true | Show the built-in × close button. Default: true. |
| closeButtonPosition | CloseButtonPosition | 'top-end' | Where the × close button sits (RTL-aware). Default: 'top-end'. |
| scrollable | boolean | true | Body scrolls independently; header & footer stay pinned. Default: true. |
| stickyHeader | boolean | true | Pin the header while the body scrolls (requires `scrollable`). Default: true. |
| stickyFooter | boolean | true | Pin the footer while the body scrolls (requires `scrollable`). Default: true. |
| lockScroll | boolean | true | Lock `<body>` scroll while the drawer is open. Combine with `scrollbarPadding` to avoid layout shift. Default: true. |
| scrollbarPadding | boolean | true | Compensate for the scrollbar width on `<body>` while locking scroll, so the page does not shift when the scrollbar disappears. Default: true. |
| autofocus | boolean | true | Auto-focus the first focusable element (or `[autofocus]`) on open. Default: true. |
| initialFocus | HandlerTarget | false | none | Explicit element to focus on open. `false` focuses the panel container. |
| disableFocus | boolean | false | Skip auto-focus entirely. Default: false. |
| returnFocus | boolean | true | Restore focus to the previously focused element on close. Default: true. |
| theme | GSDrawerTheme | 'auto' | Visual theme. `auto` follows prefers-color-scheme. Default: 'auto'. |
| accentColor | string | none | Accent color for the focus ring / handle / close button (CSS var --gsd-accent). |
| rtl | boolean | false | Right-to-left layout. Default: false. |
| customClass | GSDrawerCustomClass | none | Per-part class overrides. |
| className | string | none | Extra class name applied to the overlay root. |
| trigger | HandlerTarget | none | Element(s) that open the drawer on click. selector | HTMLElement | React ref. |
| closeHandler | HandlerTarget | none | Element(s) inside the content that close the drawer on click. selector | HTMLElement | React ref. |
Slide in from left, right, top or bottom.
Optionally shove the page instead of overlaying it.
Touch drag dismissal with velocity tracking.
Dim, blur and glass backdrop variants.