About this snippet

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.

Size
4.4 KB
Uses
HTML, CSS, JavaScript
Loads
Nothing external
Views
178

Collections

Related snippets

<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>
*, *::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;
}
const headers = document.querySelectorAll(".nav-header");

headers.forEach(function(header) {
  header.addEventListener("click", function() {
    // Find the parent group and toggle the open class
    const group = header.parentElement;
    group.classList.toggle("open");
  });
});
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source





  
Keyboard shortcuts

  




  

    
Save