Drawer

Drawer

A sliding panel component that appears from the edge of the screen.

Basic Usage

Default Drawer

Click the button to open the drawer.

<ae-button onclick="document.querySelector('#demo-drawer').show()">Open Drawer</ae-button>
<ae-drawer id="demo-drawer" label="Drawer Title">
<p>This is the drawer content. Click outside or press Escape to close.</p>
</ae-drawer>

Placement

Drawer Positions

Drawer can slide in from different edges.

<div class="demo-row">
<ae-button onclick="document.querySelector('#drawer-left').show()">Left</ae-button>
<ae-button onclick="document.querySelector('#drawer-right').show()">Right</ae-button>
<ae-button onclick="document.querySelector('#drawer-top').show()">Top</ae-button>
<ae-button onclick="document.querySelector('#drawer-bottom').show()">Bottom</ae-button>
</div>
<ae-drawer id="drawer-left" placement="left" label="Left Drawer">
<p>Slides in from the left</p>
</ae-drawer>
<ae-drawer id="drawer-right" placement="right" label="Right Drawer">
<p>Slides in from the right</p>
</ae-drawer>
<ae-drawer id="drawer-top" placement="top" label="Top Drawer">
<p>Slides in from the top</p>
</ae-drawer>
<ae-drawer id="drawer-bottom" placement="bottom" label="Bottom Drawer">
<p>Slides in from the bottom</p>
</ae-drawer>

With Header and Footer

Header & Footer Slots

Customize drawer header and footer.

<ae-button onclick="document.querySelector('#drawer-slots').show()">Open</ae-button>
<ae-drawer id="drawer-slots" label="Settings">
<div slot="header">
  <h3 style="margin: 0;">Custom Header</h3>
</div>
<p>Main drawer content goes here.</p>
<p>You can add forms, lists, or any content.</p>
<div slot="footer" style="display: flex; gap: 0.5rem; justify-content: flex-end;">
  <ae-button variant="secondary" onclick="document.querySelector('#drawer-slots').hide()">Cancel</ae-button>
  <ae-button>Save</ae-button>
</div>
</ae-drawer>

Installation

pnpm

pnpm add @aetherui-kit/core

npm

npm install @aetherui-kit/core

Import

import { defineAeDrawer } from '@aetherui-kit/core/drawer';
defineAeDrawer();

Props

Name	Type	Default	Description
open	boolean	false	Open state
label	string	''	Accessible label
placement	'left' | 'right' | 'top' | 'bottom'	'right'	Slide-in direction
contained	boolean	false	Contained within parent

Methods

Name	Description
show()	Open the drawer
hide()	Close the drawer

Events

Name	Description
ae-drawer-show	Fired when drawer opens
ae-drawer-hide	Fired when drawer closes

Slots

Name	Description
default	Main content
header	Header content
footer	Footer content

CSS Parts

Name	Description
base	Container
overlay	Background overlay
panel	Drawer panel
header	Header area
body	Content area
footer	Footer area
close-button	Close button

Accessibility

• Uses role="dialog" with aria-modal
• Focus trapped within drawer
• Escape key closes drawer
• Returns focus on close