10 CSS Sidebar Navigation Designs01 / 10

Pure CSSMIT licensed

Pure CSS Collapsible Sidebar Navigation Snippet

Developer-documentation aesthetic in a dark GitHub-style palette with JetBrains Mono accents. The whole rail collapses to an icon-only strip via the pure-CSS checkbox hack — a CSS side menu that hides and shows on click with zero JavaScript, the canonical drawer menu with text and icons that toggle together. Smooth width transition, active-item glow bar, grouped sections, and a footer user card. Best for documentation sites, developer dashboards, API consoles, admin panels where the user toggles between focused work and full navigation.

Published

Live Demo
Try it

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;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Sidebar Navigation Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Pure CSS Collapsible Sidebar Navigation Snippet
Source: https://codefronts.com/navigation/css-sidebar-navigation/pure-css-collapsible-sidebar-navigation-snippet/

Developer-documentation aesthetic in a dark GitHub-style palette with JetBrains Mono accents. The whole rail collapses to an icon-only strip via the pure-CSS checkbox hack — a CSS side menu that hides and shows on click with zero JavaScript, the canonical drawer menu with text and icons that toggle together. Smooth width transition, active-item glow bar, grouped sections, and a footer user card. Best for documentation sites, developer dashboards, API consoles, admin panels where the user toggles between focused work and full navigation.
## HTML
```html
<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>
```
## CSS
```css
/* ─── 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;
  }
}
```

Techniques used in this demo

radial-gradient()MDN ↗place-items / place-contentMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →