Drawer

The <velin-drawer> Web Component slides an off-canvas panel from any of the four sides with an overlay backdrop, focus trap, and body scroll lock.

Basic Example

Drawer content goes here.

<velin-drawer title="Navigation" id="myDrawer">
  <p>Drawer content goes here.</p>
</velin-drawer>

<button onclick="document.getElementById('myDrawer').open()">
  Open Drawer
</button>

Four Sides

Use the side attribute: start (default), end, top, or bottom.

<velin-drawer side="start" title="Left">…</velin-drawer>
<velin-drawer side="end" title="Right">…</velin-drawer>
<velin-drawer side="top" title="Top">…</velin-drawer>
<velin-drawer side="bottom" title="Bottom">…</velin-drawer>

Accessibility

Drawer panel has role="dialog" and aria-modal="true".
Focus is trapped inside the drawer while open.
Focus is restored to the previously focused element on close.
Escape key closes the drawer.
Overlay click closes the drawer.
Body scroll is locked while the drawer is open.
Animations respect prefers-reduced-motion: reduce.

CSS Variables

Variable	Description
`--velin-color-overlay`	Backdrop overlay colour
`--velin-color-surface-bright`	Drawer background
`--velin-shadow-xl`	Drawer shadow
`--velin-z-overlay`	Overlay z-index (400)
`--velin-z-modal`	Drawer z-index (500)

JavaScript API

Attributes

Attribute	Type	Description
`open`	Boolean	Whether the drawer is visible
`side`	String	`start` \| `end` \| `top` \| `bottom`
`title`	String	Header title text & `aria-label`

Methods

Method	Description
`open()`	Open the drawer
`close()`	Close the drawer

Events

Event	Description
`velin-close`	Fired when the drawer closes