Theme:
Drawer
Drawers slide in from the side to show navigation or supplementary content. They require Alpine.js for toggle behavior.
Basic Drawer
The drawer component uses a content area and a side panel with an overlay backdrop.
<div x-data="{ open: false }" class="dui-drawer">
<div class="dui-drawer-content">
<button @click="open = true" class="dui-btn dui-btn-primary">
Open drawer
</button>
<!-- Page content goes here -->
</div>
<div x-show="open" class="dui-drawer-side">
<div @click="open = false" class="dui-drawer-overlay"></div>
<aside class="dui-drawer-panel">
<div style="padding: 1rem;">
<h3 style="font-weight: 700; margin-bottom: 1rem;">Navigation</h3>
<ul class="dui-menu">
<li><a class="dui-menu-item">Dashboard</a></li>
<li><a class="dui-menu-item">Analytics</a></li>
<li><a class="dui-menu-item">Settings</a></li>
</ul>
</div>
</aside>
</div>
</div>
Right-side Drawer
Add dui-drawer-end to open the drawer from the right side.
<div x-data="{ open: false }" class="dui-drawer dui-drawer-end">
<!-- same structure as above -->
</div>