Drawer

A side panel that slides in from the edge of the screen with focus trap and Escape key support.

Basic

Preview Code click to open

Open Drawer

Filter options✕

Drawer content here. Press Escape or click backdrop to close.

<ac-button variant="secondary" onclick="document.getElementById('demo-drawer').open()">
Open Drawer
</ac-button>

<ac-drawer id="demo-drawer">
<div data-ac-drawer-backdrop></div>
<div class="ac-drawer__panel">
  <div class="ac-drawer__header">
    <span class="ac-drawer__title">Filter options</span>
    <button class="ac-drawer__close" data-ac-drawer-close aria-label="Close">✕</button>
  </div>
  <div class="ac-drawer__body">
    <p>Drawer content here. Press Escape or click backdrop to close.</p>
  </div>
</div>
</ac-drawer>

Copy

Left placement

Preview Code slides from left

Open Left

Left Panel✕

Left side drawer.

<ac-button variant="secondary" onclick="document.getElementById('drawer-left').open()">
Open Left
</ac-button>
<ac-drawer id="drawer-left" placement="left">...</ac-drawer>

Copy

JavaScript API

const drawer = document.querySelector('ac-drawer');
drawer.open();
drawer.close();
drawer.toggle();

Attributes

Attribute	Values	Description
open	boolean	Shows the drawer
placement	right (default) | left | top | bottom	Slide direction
size	sm | md | lg	Panel width