Drawer

Defaults

You can create a drawer by creating a dialog element with the class drawer. You'll also need to add one of the following classes to specify the side of the screen the drawer should slide out from:

left
right
top
bottom

Inside your drawer, you can add a header, body, and footer.

The header should have the class drawer-header and contain a title and, optionally, a close button (a button with the classes button and dismiss).

The body should have the class drawer-body and contain the main content of the drawer.

The footer should have the class drawer-footer and contain any action buttons or other controls that should appear at the bottom.

<button
  class="button"
  onclick="document.querySelector('#drawer-1').showModal()"
>
  Open Drawer
</button>

<dialog id="drawer-1" class="drawer left medium">
  <header class="drawer-header">
    <h1>User Settings</h1>
    <button
      class="button dismiss"
      onclick="document.querySelector('#drawer-1').close()"
    ></button>
  </header>
  <div class="drawer-body">
    <p class="paragraph">
      Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Duis ultricies lacus sed turpis
      tincidunt id. Rhoncus mattis rhoncus urna neque
      viverra justo nec.
    </p>
    <p class="paragraph">
      Pretium nibh ipsum consequat nisl vel pretium lectus
      quam. Ac placerat vestibulum lectus mauris ultrices.
      Elementum sagittis vitae et leo duis ut diam. Odio
      facilisis mauris sit amet massa. Cras semper auctor
      neque vitae tempus quam. Cursus metus aliquam eleifend
      mi in. Fermentum iaculis eu non diam. Diam quam nulla
      porttitor massa id neque aliquam
    </p>
  </div>
  <div class="drawer-footer">
    <button
      class="button"
      onclick="document.querySelector('#drawer-1').close()"
    >
      Cancel
    </button>
    <button
      class="button primary"
      onclick="document.querySelector('#drawer-1').close()"
    >
      Save
    </button>
  </div>
</dialog>

Sizes

You can control the width of a drawer (or the height, if the drawer is attached to the top or bottom of the screen) by adding one of the following classes to the dialog element:

auto (default)
small
medium
large

If the size is auto, the drawer will be as large as necessary to fit its content without extending past the edge of the screen.

Below is an example of a drawer with the class small.

<button
  class="button"
  onclick="document.querySelector('#drawer-2').showModal()"
>
  Open Drawer
</button>

<dialog id="drawer-2" class="drawer left small">
  <div class="drawer-header">
    <h1>User Settings</h1>
    <button
      class="button dismiss"
      onclick="document.querySelector('#drawer-2').close()"
    ></button>
  </div>
  <div class="drawer-body">
    <p class="paragraph">
      Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Duis ultricies lacus sed turpis
      tincidunt id. Rhoncus mattis rhoncus urna neque
      viverra justo nec.
    </p>
    <p class="paragraph">
      Pretium nibh ipsum consequat nisl vel pretium lectus
      quam. Ac placerat vestibulum lectus mauris ultrices.
      Elementum sagittis vitae et leo duis ut diam. Odio
      facilisis mauris sit amet massa. Cras semper auctor
      neque vitae tempus quam. Cursus metus aliquam eleifend
      mi in. Fermentum iaculis eu non diam. Diam quam nulla
      porttitor massa id neque aliquam
    </p>
  </div>
  <div class="drawer-footer">
    <button
      class="button"
      onclick="document.querySelector('#drawer-2').close()"
    >
      Cancel
    </button>
    <button
      class="button primary"
      onclick="document.querySelector('#drawer-2').close()"
    >
      Save
    </button>
  </div>
</dialog>

Dismiss Button

You can add a close button to the header of the drawer by creating a button element with the classes button and dismiss. The close button should call the close method on the dialog element when clicked.

<button
  class="button"
  onclick="document.querySelector('#drawer-2').showModal()"
>
  Open Drawer
</button>

<dialog id="drawer-2" class="drawer left small">
  <div class="drawer-header">
    <h1>User Settings</h1>
    <button
      class="button dismiss"
      onclick="document.querySelector('#drawer-2').close()"
    ></button>
  </div>
  <div class="drawer-body">
    <p class="paragraph">
      Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Duis ultricies lacus sed turpis
      tincidunt id. Rhoncus mattis rhoncus urna neque
      viverra justo nec.
    </p>
    <p class="paragraph">
      Pretium nibh ipsum consequat nisl vel pretium lectus
      quam. Ac placerat vestibulum lectus mauris ultrices.
      Elementum sagittis vitae et leo duis ut diam. Odio
      facilisis mauris sit amet massa. Cras semper auctor
      neque vitae tempus quam. Cursus metus aliquam eleifend
      mi in. Fermentum iaculis eu non diam. Diam quam nulla
      porttitor massa id neque aliquam
    </p>
  </div>
  <div class="drawer-footer">
    <button
      class="button"
      onclick="document.querySelector('#drawer-2').close()"
    >
      Cancel
    </button>
    <button
      class="button primary"
      onclick="document.querySelector('#drawer-2').close()"
    >
      Save
    </button>
  </div>
</dialog>

Playground

Side Size Include Close Button Include Header Include Body Include Footer