naUI
Components Components

Drawer

Side-panel drawer that slides in from the left or right.

Right drawer (default)

Drawers slide in from the right (or left) edge of the viewport. They use the same JS trigger attributes as modals - na-modal-open and na-modal-close.

<!-- Trigger -->
<button class="na-button na-button-primary" na-modal-open="#my-drawer">Open drawer</button>

<!-- Drawer markup (place at end of body) -->
<div class="na-drawer-overlay" id="my-drawer">
  <div class="na-drawer" role="dialog" aria-modal="true">
    <div class="na-drawer-header">
      <h5 class="na-drawer-title">Drawer title</h5>
      <button class="na-drawer-close" na-modal-close aria-label="Close">&times;</button>
    </div>
    <div class="na-drawer-body">...</div>
    <div class="na-drawer-footer">
      <button class="na-button na-button-ghost" na-modal-close>Cancel</button>
      <button class="na-button na-button-primary">Apply</button>
    </div>
  </div>
</div>

Left drawer

<div class="na-drawer na-drawer-left">...</div>

Sizes

<div class="na-drawer na-drawer-s">...</div>   <!-- 280px -->
<div class="na-drawer na-drawer-m">...</div>   <!-- 400px (default) -->
<div class="na-drawer na-drawer-l">...</div>   <!-- 560px -->
<div class="na-drawer na-drawer-xl">...</div>   <!-- 720px -->

Class reference

Class / AttributeDescription
na-drawer-overlayFull-screen backdrop layer
na-drawerSide-panel container
na-drawer-leftSlide in from left edge (default: right)
na-drawer-s / md / lg / xlWidth sizes (280px / 400px / 560px / 720px)
na-drawer-header / body / footerStructural slots
na-drawer-titleDrawer heading
na-drawer-closeClose ? button
na-modal-open="#id"Trigger attribute (shared with Modal JS)
na-modal-closeClose trigger attribute
na-openApplied by JS when drawer is open