Drawer

A Drawer is a panel that slides in from the edge of the screen. It can be used to show additional content without taking up space on the main screen.

Open drawer

Page content here

Code

<div class="backoffice-drawer">
  <input
    id="my-drawer"
    type="checkbox"
    class="hidden"
    data-drawer-trigger
  />
  <div class="backoffice-drawer-content">
    <label for="my-drawer" class="backoffice-button">
      Open drawer
    </label>
  </div>
  <label
    for="my-drawer"
    aria-label="close sidebar"
    class="backoffice-drawer-overlay"
  />
  <div class="backoffice-drawer-side">CONTENT</div>
</div>

Details

Attribute	Type	Description
.backoffice-drawer	component	Class used for drawer component container
.backoffice-drawer-side	component	Class used for drawer side container
[data-drawer-trigger]	behavior	Attribute used for drawer trigger, this element should be a checkbox with hidden class
.backoffice-drawer-overlay	behavior	Class used for drawer overlay, to enable the click to close, follow the example and assign the label tag to this class.