Drawer

The Drawer component provides a side navigation panel that slides in from the left or right. It supports modal mode with backdrop and focus trapping for accessibility.

Installation

npm install @duskmoon-dev/el-drawer

Usage

import '@duskmoon-dev/el-drawer/register';

<el-dm-drawer id="my-drawer" modal>
  <span slot="header">Menu</span>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</el-dm-drawer>

<el-dm-button onclick="document.querySelector('#my-drawer').show()">
  Open Drawer
</el-dm-button>

Live Demo

Drawer Demo

Open Left Drawer

Open Right Drawer

Navigation

Home Products About Contact

Settings

Drawer content on the right side.

Properties

Property	Type	Default	Description
`open`	`boolean`	`false`	Whether the drawer is open
`position`	`'left' \| 'right'`	`'left'`	Which side the drawer appears from
`modal`	`boolean`	`false`	Shows backdrop and traps focus when true
`width`	`string`	`'280px'`	Custom width for the drawer (CSS value)

Methods

Method	Description
`show()`	Opens the drawer
`hide()`	Closes the drawer
`toggle()`	Toggles the drawer open/closed

Events

Event	Description
`open`	Fired when drawer opens
`close`	Fired when drawer closes

Event Handling

const drawer = document.querySelector('el-dm-drawer');
drawer.addEventListener('open', () => {
  console.log('Drawer opened');
});
drawer.addEventListener('close', () => {
  console.log('Drawer closed');
});

Position Variants

<!-- Left drawer (default) -->
<el-dm-drawer position="left">...</el-dm-drawer>

<!-- Right drawer -->
<el-dm-drawer position="right">...</el-dm-drawer>

<!-- Modal drawer with backdrop -->
<el-dm-drawer modal>
  Content that requires focus
</el-dm-drawer>

<!-- Non-modal drawer (no backdrop) -->
<el-dm-drawer>
  Side navigation that doesn't block interaction
</el-dm-drawer>

Custom Width

<el-dm-drawer width="400px">...</el-dm-drawer>
<el-dm-drawer width="50vw">...</el-dm-drawer>

Slots

Slot	Description
default	Main drawer content (body)
`header`	Drawer header section
`footer`	Drawer footer section

CSS Parts

Part	Description
`wrapper`	The outer wrapper
`drawer`	The drawer container
`backdrop`	The backdrop overlay (modal mode)
`header`	The header section
`body`	The body section
`footer`	The footer section
`close`	The close button

Styling Example

el-dm-drawer::part(drawer) {
  --drawer-width: 320px;
  background: linear-gradient(to bottom, #f8fafc, #ffffff);
}

el-dm-drawer::part(header) {
  background-color: var(--color-primary);
  color: white;
}

el-dm-drawer::part(close) {
  color: white;
}

Accessibility

Uses role="dialog" and aria-modal="true" for modal drawers
Escape key closes modal drawers
Focus is trapped within modal drawers when open
Body scroll is disabled when modal drawer is open
Focus returns to the previously focused element when closed
Close button has aria-label="Close drawer"