Overlay

Drawer

Drawers are sliding panels that overlay content from the left or right. They are useful for navigation, settings, or actions that don’t require leaving the current page.

<div class="quanta-drawer-overlay active"></div>
<aside class="quanta-drawer quanta-drawer-left active">
  <div class="quanta-drawer-header">
    Drawer Title
    <button class="quanta-drawer-close">×</button>
  </div>
  <div class="quanta-drawer-body">
    Content inside the drawer.
  </div>
</aside>

Placement

Use .quanta-drawer-left or .quanta-drawer-right to control the drawer’s entry direction.

<aside class="quanta-drawer quanta-drawer-right active">
  ...
</aside>

Structure & Navigation

Inside the drawer you can include navigation links and structured content.

<ul class="quanta-drawer-menu">
  <li><a href="#" class="quanta-drawer-link">Dashboard</a></li>
  <li><a href="#" class="quanta-drawer-link">Settings</a></li>
</ul>

Dark Mode Support

Drawers support dark mode out of the box when you set data-theme="dark" on the <html> element.

<html data-theme="dark">
  ...
</html>