Theme:
Sidebar
Sidebars provide vertical navigation with sections and items. The collapsed state can be toggled with Alpine.js.
Basic Sidebar
<aside class="dui-sidebar">
<div class="dui-sidebar-header"><span>MyApp</span></div>
<div class="dui-sidebar-section">
<span class="dui-sidebar-section-title">Main</span>
<a class="dui-sidebar-item dui-sidebar-item-active">Dashboard</a>
<a class="dui-sidebar-item">Analytics</a>
<a class="dui-sidebar-item">Reports</a>
</div>
</aside>
Collapsible (Alpine.js)
Use Alpine.js to toggle the dui-sidebar-collapsed class for a compact icon-only sidebar.
<aside x-data="{ collapsed: false }" class="dui-sidebar"
:class="{ 'dui-sidebar-collapsed': collapsed }">
<button @click="collapsed = !collapsed" class="dui-btn dui-btn-ghost dui-btn-sm">
Toggle
</button>
<a class="dui-sidebar-item">
<svg>...</svg>
<span>Dashboard</span>
</a>
</aside>