<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.

#javascript

#css

#sidebar

#navigation

#collapsible

#notion

#menu

#ui

/HTML *CSS ()JS Output Live Updates

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #ffffff;
  margin: 0;
  min-height: 100vh;
}

.app-layout {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 260px;
  background: #f9fafb;
  border-right: 1px solid #e5e7eb;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 20px 10px;
  margin-bottom: 10px;
}

.brand-icon {
  background: #111827;
  color: #ffffff;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 800;
}

.brand-text {
  font-weight: 600;
  color: #111827;
}

.nav-group {
  margin-bottom: 8px;
}

.nav-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.2s;
}

.nav-header:hover {
  background: #f3f4f6;
}

.chevron {
  transition: transform 0.2s;
}

.nav-items {
  display: none;
  flex-direction: column;
  padding-left: 12px;
  margin-top: 4px;
}

/* Open State */
.nav-group.open .nav-items {
  display: flex;
}

.nav-group.open .chevron {
  transform: rotate(90deg);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: #4b5563;
  text-decoration: none;
  font-size: 0.95rem;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.nav-link:hover {
  background: #e5e7eb;
  color: #111827;
}

.main-view {
  flex-grow: 1;
  padding: 60px;
  color: #374151;
}

<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>

Notion Style Sidebar Navigation JS

Share Code Snippet