Drawer

The drawer (.drawer) is a slide-in panel most commonly used as an off-canvas navigation menu, holding a panel with a header and a list of item links/buttons. Unlike most overlay components, drawer has two structurally distinct modes chosen with a required class: .drawer-modal renders it as a fixed, full-height panel with a scrim that traps attention, while .drawer-standard renders it as a persistent, non-overlaying sidebar that simply shows or hides in the document flow.

<button type="button" class="btn toggle-target" aria-controls="drawer-demo">Menu</button>

<div class="drawer drawer-modal" id="drawer-demo">
  <div class="drawer-scrim action-close"></div>
  <div class="drawer-panel">
    <div class="drawer-header">Menu</div>
    <nav class="drawer-items">
      <a class="drawer-item" href="#" aria-current="page"><span class="drawer-item-icon" aria-hidden="true">🏠</span>Home</a>
      <a class="drawer-item" href="#"><span class="drawer-item-icon" aria-hidden="true">⚙</span>Settings</a>
    </nav>
  </div>
</div>