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-{ top, left, right }`	`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.