<div class="sidebar-wrapper" style="min-height: 300px; position: relative;">
<aside class="sidebar" style="position: relative; height: 300px;">
<div class="sidebar-header">
<a class="sidebar-logo" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="size-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/></svg>
<span class="sidebar-label">Acme Inc</span>
</a>
</div>
<div class="sidebar-content">
<div class="sidebar-group">
<span class="sidebar-group-label">Main</span>
<nav class="sidebar-menu">
<div class="sidebar-menu-item">
<a class="sidebar-menu-button is-active" href="#">
<span class="sidebar-menu-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></span>
<span class="sidebar-label">Dashboard</span>
</a>
</div>
<div class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">
<span class="sidebar-menu-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></span>
<span class="sidebar-label">Projects</span>
<span class="sidebar-badge">5</span>
</a>
</div>
<div class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">
<span class="sidebar-menu-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></span>
<span class="sidebar-label">Team</span>
</a>
</div>
</nav>
</div>
<div class="sidebar-separator"></div>
<div class="sidebar-group">
<span class="sidebar-group-label">Settings</span>
<nav class="sidebar-menu">
<div class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">
<span class="sidebar-menu-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></span>
<span class="sidebar-label">Settings</span>
</a>
</div>
</nav>
</div>
</div>
<div class="sidebar-footer">
<div class="sidebar-user">
<div class="sidebar-user-avatar">
<img src="https://i.pravatar.cc/32?u=sidebar" alt="User" />
</div>
<div class="sidebar-user-info">
<div class="sidebar-user-name">John Doe</div>
<div class="sidebar-user-email">john@example.com</div>
</div>
</div>
</div>
</aside>
</div>
Requires: ux.min.css
<aside class="flex flex-col w-64 h-[300px] bg-base-100 border-r border-base-300">
<div class="flex items-center gap-2 p-3 border-b border-base-300">
<svg class="size-8" viewBox="0 0 24 24">...</svg>
<span class="font-semibold text-lg">Acme Inc</span>
</div>
<nav class="flex-1 overflow-y-auto p-2">
<a href="#" class="flex items-center gap-2 p-2 rounded-field bg-primary text-primary-content text-sm font-medium">
<svg class="size-5">...</svg> Dashboard
</a>
<a href="#" class="flex items-center gap-2 p-2 rounded-field hover:bg-base-200 text-sm font-medium">
<svg class="size-5">...</svg> Projects
</a>
</nav>
</aside>
Requires: tw.min.css
// Collapse: sidebar.dataset.state = 'collapsed';
// Expand: sidebar.dataset.state = 'expanded';
// Mobile: toggle .is-open on sidebar, show .sidebar-backdrop