---
name: drawer
category: overlays
summary: "Edge-anchored slide-in panel with focus trap"
subpath: "@42/core/drawer"
---

Slide-in panel anchored to an edge. Focus trap, scroll lock, Esc/overlay dismissal.

```html
<div data-c42-drawer>
  <div data-c42-drawer-overlay></div>
  <div data-c42-drawer-content>
    <button data-c42-drawer-close>Close</button>
  </div>
</div>
```

```ts
import { Drawer } from '@42/core/drawer';
const drawer = new Drawer(root, { side: 'right', closeOnEscape: true, closeOnOverlayClick: true });
drawer.open();
```

Options: `side` ('left'|'right'|'top'|'bottom'), `closeOnOverlayClick`, `closeOnEscape`, `lockScroll`, `defaultOpen`
Events: `drawer:open`, `drawer:close`