10 CSS Sidebar Navigation 01 / 10

Pure CSS Collapsible Sidebar Navigation Snippet

Developer-documentation aesthetic in a dark GitHub-style palette with JetBrains Mono accents.

Best fordocumentation sites, developer dashboards, API consoles, admin panels where the user toggles between focused work and full navigation.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="sn-clp" aria-label="Pure CSS collapsible sidebar demo">
  <input type="checkbox" id="sn-clp-t" class="toggle" aria-label="Toggle sidebar">
  <aside class="sidebar">
    <div class="brand">
      <div class="logo" aria-hidden="true">&gt;_</div>
      <div class="brand-text">
        <b>Forge</b>
        <span>v3.2.0 · docs</span>
      </div>
      <label for="sn-clp-t" class="burger" title="Toggle sidebar" aria-label="Toggle sidebar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16" stroke-width="2" stroke-linecap="round"/></svg>
      </label>
    </div>
    <nav class="nav" aria-label="Documentation sections">
      <div class="group-label">Getting Started</div>
      <a class="item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg><span>Introduction</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M13 2L3 14h9l-1 8 10-12h-9z"/></svg><span>Quickstart</span><i class="badge">new</i></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6v6H9z"/></svg><span>Installation</span></a>
      <div class="group-label">Reference</div>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"/></svg><span>API Methods</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg><span>Guides</span><i class="badge">12</i></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-2.82 1.17V21a2 2 0 01-4 0v-.09A1.65 1.65 0 007 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 14H4.5a2 2 0 010-4h.09A1.65 1.65 0 006 8.6"/></svg><span>Configuration</span></a>
    </nav>
    <div class="foot">
      <div class="user">
        <div class="avatar" aria-hidden="true"></div>
        <div><b>Devon Lane</b><small>pro plan</small></div>
      </div>
    </div>
  </aside>
  <main class="content">
    <h1>Pure CSS Collapsible Sidebar</h1>
    <p>A zero-JavaScript collapsible navigation rail built entirely with the checkbox-hack pattern. Click the menu icon to smoothly collapse the sidebar down to icon-only mode and back.</p>
    <div class="code">
<span class="c">// the entire toggle logic</span><br>
&lt;input type="checkbox" id="t"&gt;<br>
&lt;label for="t"&gt;☰&lt;/label&gt;<br><br>
<span class="c">/* 100% CSS, no scripts */</span>
    </div>
  </main>
</section>
/* ─── 01 Pure CSS Collapsible Sidebar — dev docs dark ──────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Sora:wght@400;600;700&display=swap');

.sn-clp {
  --sn-clp-bg: #0d1117;
  --sn-clp-panel: #161b22;
  --sn-clp-panel-2: #1c2230;
  --sn-clp-line: #262d3a;
  --sn-clp-txt: #c9d1d9;
  --sn-clp-muted: #6e7681;
  --sn-clp-accent: #39d353;
  --sn-clp-accent-2: #2dd4bf;

  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'Sora', sans-serif;
  background:
    radial-gradient(900px 500px at 110% -10%, rgba(57,211,83,.08), transparent 60%),
    var(--sn-clp-bg);
  color: var(--sn-clp-txt);
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}
.sn-clp *, .sn-clp *::before, .sn-clp *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sn-clp .toggle { display: none; }
.sn-clp .sidebar {
  width: 260px;
  background: var(--sn-clp-panel);
  border-right: 1px solid var(--sn-clp-line);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: width .32s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  flex-shrink: 0;
}
.sn-clp .brand {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.4rem 1.2rem;
  border-bottom: 1px solid var(--sn-clp-line);
  white-space: nowrap;
}
.sn-clp .logo {
  min-width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--sn-clp-accent), var(--sn-clp-accent-2));
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #04130a;
}
.sn-clp .brand b { font-size: 1.05rem; letter-spacing: -.02em; }
.sn-clp .brand span { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--sn-clp-muted); display: block; }
.sn-clp .burger {
  margin-left: auto; cursor: pointer; width: 30px; height: 30px;
  border-radius: 7px; display: grid; place-items: center; color: var(--sn-clp-muted);
  transition: .2s; flex-shrink: 0;
}
.sn-clp .burger:hover { background: var(--sn-clp-panel-2); color: var(--sn-clp-accent); }
.sn-clp .burger svg { width: 18px; height: 18px; }

.sn-clp .nav { padding: 1rem .8rem; flex: 1; overflow-y: auto; }
.sn-clp .group-label {
  font-family: 'JetBrains Mono', monospace; font-size: .65rem;
  text-transform: uppercase; letter-spacing: .15em; color: var(--sn-clp-muted);
  padding: .6rem .8rem .4rem; white-space: nowrap;
}
.sn-clp .item {
  display: flex; align-items: center; gap: .85rem;
  padding: .62rem .8rem; border-radius: 9px; color: var(--sn-clp-txt);
  text-decoration: none; font-size: .9rem; white-space: nowrap;
  position: relative; transition: background .18s, color .18s;
}
.sn-clp .item svg { width: 19px; height: 19px; flex-shrink: 0; stroke-width: 1.7; }
.sn-clp .item span { transition: opacity .2s; }
.sn-clp .item:hover { background: var(--sn-clp-panel-2); color: #fff; }
.sn-clp .item.active { background: linear-gradient(90deg, rgba(57,211,83,.14), transparent); color: var(--sn-clp-accent); }
.sn-clp .item.active::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
  border-radius: 3px; background: var(--sn-clp-accent);
}
.sn-clp .badge {
  margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: .62rem;
  background: var(--sn-clp-panel-2); padding: .1rem .4rem; border-radius: 6px; color: var(--sn-clp-muted);
  font-style: normal;
}

.sn-clp .foot { padding: 1rem; border-top: 1px solid var(--sn-clp-line); }
.sn-clp .user { display: flex; align-items: center; gap: .7rem; white-space: nowrap; }
.sn-clp .avatar { min-width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #2dd4bf, #39d353); flex-shrink: 0; }
.sn-clp .user b { font-size: .85rem; }
.sn-clp .user small { display: block; color: var(--sn-clp-muted); font-family: 'JetBrains Mono', monospace; font-size: .66rem; }

/* collapsed state */
.sn-clp .toggle:checked ~ .sidebar { width: 74px; }
.sn-clp .toggle:checked ~ .sidebar .item span,
.sn-clp .toggle:checked ~ .sidebar .badge,
.sn-clp .toggle:checked ~ .sidebar .group-label,
.sn-clp .toggle:checked ~ .sidebar .user > div:not(.avatar) { opacity: 0; pointer-events: none; }
.sn-clp .toggle:checked ~ .sidebar .group-label { height: 8px; padding: 0; }
.sn-clp .toggle:checked ~ .sidebar .brand {
  flex-direction: column; gap: .7rem; padding: 1.1rem 0;
}
.sn-clp .toggle:checked ~ .sidebar .brand-text {
  width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none;
}
.sn-clp .toggle:checked ~ .sidebar .burger { margin-left: 0; }

.sn-clp .content { flex: 1; padding: 3rem; overflow-y: auto; min-width: 0; }
.sn-clp .content h1 { font-size: 2rem; letter-spacing: -.03em; margin-bottom: .6rem; }
.sn-clp .content p { color: var(--sn-clp-muted); max-width: 560px; line-height: 1.7; }
.sn-clp .code {
  margin-top: 2rem; background: var(--sn-clp-panel); border: 1px solid var(--sn-clp-line);
  border-radius: 14px; padding: 1.4rem 1.6rem; font-family: 'JetBrains Mono', monospace;
  font-size: .82rem; color: var(--sn-clp-accent-2); max-width: 560px;
}
.sn-clp .code .c { color: var(--sn-clp-muted); }

@media (prefers-reduced-motion: reduce) {
  .sn-clp .sidebar, .sn-clp .item span { transition: none; }
}

More from 10 CSS Sidebar Navigation

Responsive Sidebar Toggle with HTML and CSSLight & Flexible CSS Vertical Rail Menu (Collapsible)Responsive Dashboard Sidebar Navigation with SubmenusMulti-Level Vertical Sidebar Menu Template in HTML/CSSPure CSS Accordion Sidebar for Admin DashboardsFixed Full-Height CSS Sidebar Navigation LayoutModern Glassmorphism Floating Sidebar Design in CSSResponsive Off-Canvas Mobile Sidebar Navigation OverlayApp-Style Vertical Sidebar Menu with Bottom-Pinned Profile
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →