drawer component

Drop-in semantic component. See examples, sizes, variants, and source.

Sliding side panel for navigation, filters, or off-canvas forms. Wrap a drawer in a drawer-overlay, give the trigger a data-drawer="..." attribute, and add modifiers for position (left right top bottom), size (xs sm xl lg fullscreen), or accent color (primary positive negative warning info). Open / close behaviour is wired by drawer.js.

Drawer System

The drawer system provides sliding panels from screen edges. It requires three parts:

Trigger Button - A button with data-drawer="drawer-id" attribute
Drawer HTML - The drawer structure with matching id="drawer-id"
JavaScript - Automatically loaded via bluestack.core.js (no setup needed!)

Position Variants

Left Drawer (Default)

<!-- Trigger Button -->
<button class="button primary" data-drawer="example-left">Open Left Drawer</button>

<!-- Drawer HTML -->
<div id="example-left" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer left">
    <!-- 'left' is optional as it's default -->
    <div class="header">
      <div>
        <h3 class="title">Left Drawer</h3>
        <p class="description">Slides in from the left edge</p>
      </div>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>This is a left-aligned drawer. Perfect for navigation menus.</p>
    </div>
    <div class="footer">
      <button class="button">Cancel</button>
      <button class="button primary">Save Changes</button>
    </div>
  </div>
</div>

Right Drawer

<!-- Trigger Button -->
<button class="button primary" data-drawer="example-right">Open Right Drawer</button>

<!-- Drawer HTML -->
<div id="example-right" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer right">
    <div class="header">
      <h3 class="title">Right Drawer</h3>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>Slides from right. Great for filters and settings.</p>
    </div>
    <div class="footer center">
      <button class="button primary">Close</button>
    </div>
  </div>
</div>

Top Drawer

<!-- Trigger Button -->
<button class="button primary" data-drawer="example-top">Open Top Drawer</button>

<!-- Drawer HTML -->
<div id="example-top" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer top">
    <div class="header">
      <h3 class="title">Notification</h3>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>Slides down from top. Perfect for notifications.</p>
    </div>
  </div>
</div>

Bottom Drawer

<!-- Trigger Button -->
<button class="button primary" data-drawer="example-bottom">Open Bottom Drawer</button>

<!-- Drawer HTML -->
<div id="example-bottom" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer bottom">
    <div class="header">
      <h3 class="title">Actions</h3>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>Slides up from bottom. Mobile-style action sheets.</p>
    </div>
    <div class="footer">
      <button class="button primary w-full">Select Option</button>
    </div>
  </div>
</div>

Size Variants

Tiny Drawer

<!-- Trigger Button -->
<button class="button" data-drawer="example-tiny">Tiny Drawer</button>

<!-- Drawer HTML -->
<div id="example-tiny" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer xs">
    <!-- Notice the 'tiny' class -->
    <div class="header">
      <h3 class="title">Tiny (240px)</h3>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>Compact drawer for minimal content.</p>
    </div>
  </div>
</div>

Large Drawer

<!-- Trigger Button -->
<button class="button" data-drawer="example-large">Large Drawer</button>

<!-- Drawer HTML -->
<div id="example-large" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer xl">
    <!-- Notice the 'large' class -->
    <div class="header">
      <h3 class="title">Large (600px)</h3>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>Large drawer for detailed forms or content.</p>
    </div>
  </div>
</div>

Fullscreen Drawer

<!-- Trigger Button -->
<button class="button" data-drawer="example-fullscreen">Fullscreen Drawer</button>

<!-- Drawer HTML -->
<div id="example-fullscreen" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer fullscreen">
    <!-- Notice the 'fullscreen' class -->
    <div class="header">
      <h3 class="title">Fullscreen Drawer</h3>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>Covers the entire viewport.</p>
    </div>
  </div>
</div>

Color Variants

Primary Drawer

<!-- Trigger Button -->
<button class="button primary" data-drawer="example-primary">Primary Drawer</button>

<!-- Drawer HTML -->
<div id="example-primary" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer primary">
    <!-- Notice the 'primary' class -->
    <div class="header">
      <div class="icon-container">
        <i class="icon info"></i>
      </div>
      <div>
        <h3 class="title">Primary Action</h3>
        <p class="description">Important information</p>
      </div>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>Primary color scheme for main actions.</p>
    </div>
    <div class="footer">
      <button class="button">Cancel</button>
      <button class="button primary">Continue</button>
    </div>
  </div>
</div>

Negative Drawer

<!-- Trigger Button -->
<button class="button negative" data-drawer="example-negative">Danger Drawer</button>

<!-- Drawer HTML -->
<div id="example-negative" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer negative">
    <!-- Notice the 'negative' class -->
    <div class="header">
      <div class="icon-container">
        <i class="icon triangle-alert"></i>
      </div>
      <div>
        <h3 class="title">Delete Confirmation</h3>
        <p class="description">This action cannot be undone</p>
      </div>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <p>Are you sure you want to delete this item?</p>
    </div>
    <div class="footer">
      <button class="button">Cancel</button>
      <button class="button negative">Delete</button>
    </div>
  </div>
</div>

Form Example

Form Drawer

<!-- Trigger Button -->
<button class="button primary" data-drawer="example-form">Edit Profile</button>

<!-- Drawer HTML -->
<div id="example-form" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer">
    <div class="header">
      <h3 class="title">Edit Profile</h3>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <form class="stack">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
          <input type="text" class="input" placeholder="Enter your name" />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
          <input type="email" class="input" placeholder="Enter your email" />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
          <textarea class="textarea" rows="3" placeholder="Tell us about yourself"></textarea>
        </div>
      </form>
    </div>
    <div class="footer">
      <button class="button">Cancel</button>
      <button class="button primary" data-keep-open>Save Profile</button>
    </div>
  </div>
</div>

<button class="button primary" data-drawer="example-form">Edit Profile</button>

<div id="example-form" class="drawer-overlay hidden" aria-hidden="true">
  <div class="drawer">
    <div class="header">
      <h3 class="title">Edit Profile</h3>
      <button class="close">
        <i class="icon x w-4 h-4"></i>
      </button>
    </div>
    <div class="content">
      <form class="stack">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
          <input type="text" class="input" placeholder="Enter your name" />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
          <input type="email" class="input" placeholder="Enter your email" />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
          <textarea class="textarea" rows="3" placeholder="Tell us about yourself"></textarea>
        </div>
      </form>
    </div>
    <div class="footer">
      <button class="button">Cancel</button>
      <button class="button primary" data-keep-open>Save Profile</button>
    </div>
  </div>
</div>

JavaScript API

JavaScript Methods

// Open drawer Drawer.open('drawer-id'); Drawer.open('drawer-id', { position: 'right', size: 'large' }); // Close drawer Drawer.close('drawer-id'); // Toggle drawer Drawer.toggle('drawer-id'); // Close all drawers Drawer.closeAll(); // Check if drawer is open if (Drawer.isOpen('drawer-id')) { console.log('Drawer is open'); } // Event listeners document.getElementById('drawer-id').addEventListener('drawer:open', (e) => { console.log('Drawer opened', e.detail); }); document.getElementById('drawer-id').addEventListener('drawer:close', (e) => { console.log('Drawer closed', e.detail); });

// Open drawer Drawer.open('drawer-id'); Drawer.open('drawer-id', { position: 'right', size: 'large'
}); // Close drawer Drawer.close('drawer-id'); // Toggle drawer Drawer.toggle('drawer-id'); // Close
all drawers Drawer.closeAll(); // Check if drawer is open if (Drawer.isOpen('drawer-id')) {
console.log('Drawer is open'); } // Event listeners
document.getElementById('drawer-id').addEventListener('drawer:open', (e) => { console.log('Drawer
opened', e.detail); }); document.getElementById('drawer-id').addEventListener('drawer:close', (e) =>
{ console.log('Drawer closed', e.detail); });

Data Attributes

Advanced Trigger Options

<!-- Position and size via data attributes -->
<button
  class="button"
  data-drawer="my-drawer"
  data-drawer-position="right"
  data-drawer-size="large"
>
  Open Right Large Drawer
</button>

<!-- Prevent closing on overlay click -->
<div id="my-drawer" class="drawer-overlay hidden" aria-hidden="true" data-no-close-on-overlay>
  <div class="drawer">
    <!-- Drawer content -->
  </div>
</div>

<!-- Keep drawer open on button click -->
<button class="button primary" data-keep-open>Save without closing</button>

Interactive Examples

Class API Reference

Type	Class	Usage	Notes
Base	`drawer-overlay`	Full-screen overlay that hosts the drawer	Toggle `hidden` / `active` via JS
	`drawer`	The sliding panel itself	Always required
	`data-drawer`	Trigger attribute — value matches drawer `id`	Wired by `drawer.js`
Structure	`header`	Top bar with title + close button	Child of `drawer`
	`title` / `description`	Header text content	Inside `header`
	`close`	Close button	Auto-wired by `drawer.js`
	`icon-container`	Decorative icon slot in colored variants	Inside `header`
	`content`	Scrollable body	Child of `drawer`
	`footer`	Bottom action bar	Add `center` / `between` for alignment
Position	`left`	Slides from the left edge	Default; class is optional
	`right`	Slides from the right edge	Filters / details panes
	`top`	Slides from the top edge	Notifications
	`bottom`	Slides from the bottom edge	Mobile action sheets
Size	`xs`	240px / 20vh — tiny	Modifier on `drawer`
	`sm`	320px / 30vh — small	Modifier on `drawer`
	(default)	400px / 40vh — medium	No size class needed
	`xl`	600px / 60vh — large	Modifier on `drawer`
	`lg`	800px / 80vh — big	Modifier on `drawer`
	`fullscreen`	100% viewport	Modifier on `drawer`
Color (Intent)	(default)	Neutral / gray	No class needed
	`primary`	Blue accent	Modifier on `drawer`
	`positive`	Green accent — success	Modifier on `drawer`
	`negative`	Red accent — destructive	Modifier on `drawer`
	`warning`	Yellow / orange accent	Modifier on `drawer`
	`info`	Blue accent — informational	Modifier on `drawer`
Overlay	`no-backdrop`	Transparent overlay	Modifier on `drawer-overlay`
	`dark-backdrop`	Darker overlay (70% black)	Modifier on `drawer-overlay`
	`light-backdrop`	Light overlay (70% white)	Modifier on `drawer-overlay`
Trigger / Behavior	`data-drawer-position`	Override position from the trigger	`left\|right\|top\|bottom`
	`data-drawer-size`	Override size from the trigger	`xs\|sm\|xl\|lg\|fullscreen`
	`data-no-close-on-overlay`	Disable click-outside to close	On `drawer-overlay`
	`data-keep-open`	Action button doesn't auto-close	On any inside button