<div class="side-layout">
<div class="side-nav" id="sidebar">
<div class="nav-header">
<span class="logo-text">Admin</span>
<button id="toggleBtn" class="toggle-icon">☰</button>
</div>
<ul class="nav-links">
<li>
<a href="#">
<span class="icon">🏠</span>
<span class="link-text">Dashboard</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">📈</span>
<span class="link-text">Analytics</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">📦</span>
<span class="link-text">Products</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">⚙</span>
<span class="link-text">Settings</span>
</a>
</li>
</ul>
</div>
<div class="content-area">
<h1>Main Content</h1>
<p>Click the hamburger icon to collapse the sidebar.</p>
</div>
</div>
Back to Snippets
Collapsible Sidebar Menu JS
Save screen space with this collapsible sidebar. Users can toggle between a wide menu with text and a mini version with just icons, so it works great for dashboards with lots of content.
515