<div class="app-layout">
<div class="sidebar">
<div class="brand">
<div class="brand-icon">W</div>
<span class="brand-text">Workspace</span>
</div>
<div class="nav-group">
<div class="nav-header">
<svg class="chevron" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
<span>Favorites</span>
</div>
<div class="nav-items">
<a href="#" class="nav-link">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
Weekly Goals
</a>
<a href="#" class="nav-link">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
Marketing Plan
</a>
</div>
</div>
<div class="nav-group">
<div class="nav-header">
<svg class="chevron" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
<span>Projects</span>
</div>
<div class="nav-items">
<a href="#" class="nav-link">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
Website Redesign
</a>
<a href="#" class="nav-link">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
Mobile App
</a>
</div>
</div>
</div>
<div class="main-view">
<h1>Select a document</h1>
<p>Click on the sidebar headers to expand or collapse sections.</p>
</div>
</div>
Back to Snippets
Notion Style Sidebar Navigation JS
Organize complex apps using a Notion style sidebar. We made the categories collapsible and added clean SVG icons, so your navigation stays completely clutter-free and easy to use.
67