Drawers

Requires JavaScript

drawer

A drawer is content meant to be toggled with the active class and then slide into view from any direction. The default orientation is bottom.

A drawer can easily be opened by setting data-drawer with the matching id of the desired drawer on a button with the drawer__open class. Similarly, a button with the same setup and the drawer__close class will close the drawer.

Demo

Markup

<button class="button drawer__open" data-drawer="default">
  Toggle default drawer
</button>
<!-- Default Drawer -->
<div id="default" class="drawer">
  <div class="drawer__inner">
    <div class="drawer__header">
      <button class="button drawer__close" data-drawer="default">
        Close 
        <i class="pi-times" aria-hidden="true"></i>
      </button>
      <!-- Drawer header goes here! -->
    </div>
    <div class="drawer__content">
      <!-- Drawer content goes here! -->
    </div>
  </div>
</div>

Modifiers

Modifier † Data Attribute Behavior
drawer-{ t, l, r } data-drawer top, left, right orientation. Bottom is default.
drawer--single-row data-drawer A small drawer.

The base class is always required.

If the header-fixed class is added to the main wrapper, the side drawers will open below the header.