Requires JavaScript


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.



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


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.