Drawer Component

The Drawer component creates a mobile-optimized bottom sheet that slides up from the screen’s bottom edge. It provides a native-feeling experience with smooth animations, gesture controls, and accessibility features built-in.

Key Features

• Intuitive: Natural touch gestures and smooth animations

• Responsive: Optimized for mobile and desktop interactions

• Accessible: Keyboard navigation and screen reader support

• Flexible: Customizable content and styling options

Basic Implementation

1
<Button id="drawer-trigger">Open Settings</Button>
2

3
<Drawer triggerQuery="#drawer-trigger">
4
  <h2 class="text-xl font-bold">Settings</h2>
5
  <p>Configure your preferences here.</p>
6
</Drawer>

Live Demo

Try the interactive example:

Features

Interaction Methods

1. Touch Gestures

   • Drag to dismiss
   • Velocity-based animations
   • Natural-feeling physics

2. Click Actions

   • Trigger button to open
   • Close button to dismiss
   • Backdrop tap to close

3. Keyboard Support

   • Escape key dismissal
   • Focus trap navigation
   • ARIA attribute integration

Drawer Component API

Drawer Functions API

The drawer component provides a set of functions to interact with the drawer:

Event Handling

The component emits custom events for changes:

1
document.querySelector('drawer-wrapper').addEventListener(DrawerEventNames.Open, (event) => {
2
  // Handle open
3
});
4

5
document.querySelector('drawer-wrapper').addEventListener(DrawerEventNames.Close, (event) => {
6
  // Handle close
7
});

Common Use Cases