Collapsible Sidebar — Live CSS Playground

{CF} CodeFronts Back to CSS Sidebar Layouts Collapsible Sidebar Pure CSS

.sb-col {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #fff5ee; color: #2a0e2c;
  border-radius: 16px; overflow: hidden;
  transition: grid-template-columns 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.sb-col:has(.sb-col-cb:checked) { grid-template-columns: 64px 1fr; }
.sb-col-cb { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.sb-col:has(.sb-col-cb:focus-visible) .sb-col-toggle { outline: 2px solid #fff; outline-offset: 2px; }
.sb-col-side {
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(160deg, #ff7a4d 0%, #ec1d8c 55%, #6a0a8c 100%);
  color: #fff;
  padding: 16px 12px; display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.18);
  position: relative;
}
.sb-col-side::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 50% 110%, rgba(255,213,128,0.55), transparent 60%);
  pointer-events: none;
}
.sb-col-toggle {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 10px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff; cursor: pointer; user-select: none;
  backdrop-filter: blur(8px);
  transition: background 0.15s;
}
.sb-col-toggle:hover { background: rgba(255,255,255,0.28); }
.sb-col-burger { display: inline-flex; flex-direction: column; gap: 3px; width: 14px; flex-shrink: 0; }
.sb-col-burger i { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.22s, opacity 0.22s; }
.sb-col:has(.sb-col-cb:checked) .sb-col-burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.sb-col:has(.sb-col-cb:checked) .sb-col-burger i:nth-child(2) { opacity: 0; }
.sb-col:has(.sb-col-cb:checked) .sb-col-burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.sb-col-tlabel { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; transition: opacity 0.18s; }
.sb-col:has(.sb-col-cb:checked) .sb-col-tlabel { opacity: 0; pointer-events: none; }
.sb-col-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px; text-decoration: none; }
.sb-col-mark { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: linear-gradient(135deg, #ffd580 0%, #ff7a4d 50%, #ec1d8c 100%); box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 4px 14px rgba(236,29,140,0.45); }
.sb-col-name { color: #fff; font-size: 14px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; transition: opacity 0.18s; white-space: nowrap; }
.sb-col-name small { display: block; font-size: 9.5px; color: #ffd580; font-weight: 700; letter-spacing: 0.16em; margin-top: 3px; text-transform: uppercase; }
.sb-col:has(.sb-col-cb:checked) .sb-col-name { opacity: 0; pointer-events: none; }
.sb-col-side ul { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sb-col-side a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 11px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.86); text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.sb-col-side a:hover { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.22); }
.sb-col-side a[aria-current="page"] {
  background: rgba(255,255,255,0.95); color: #6a0a8c;
  box-shadow: 0 6px 18px rgba(106,10,140,0.3);
}
.sb-col-ico { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }
.sb-col-side a[aria-current="page"] .sb-col-ico { color: #ec1d8c; }
.sb-col-lbl { white-space: nowrap; overflow: hidden; transition: opacity 0.18s; }
.sb-col:has(.sb-col-cb:checked) .sb-col-lbl { opacity: 0; pointer-events: none; }
.sb-col-main {
  padding: 32px 36px; overflow: hidden;
  display: flex; flex-direction: column; gap: 16px;
  background:
    radial-gradient(60% 80% at 100% 0%, #ffe4d6 0%, transparent 60%),
    radial-gradient(50% 60% at 0% 100%, #fff1d6 0%, transparent 60%),
    #fff5ee;
}
.sb-col-eye { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; color: #ec1d8c; text-transform: uppercase; }
.sb-col-main h2 {
  margin: 0; font-size: clamp(32px, 5vw, 56px); font-weight: 800; line-height: 0.96;
  background: linear-gradient(135deg, #ff7a4d 0%, #ec1d8c 60%, #6a0a8c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -0.03em;
}
.sb-col-main p { margin: 0; font-size: 13.5px; color: #5a3a52; line-height: 1.6; max-width: 460px; }
.sb-col-main code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #6a0a8c; background: rgba(236,29,140,0.12); padding: 1px 6px; border-radius: 4px; }
.sb-col-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 12px; margin-top: 6px; }
.sb-col-c { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid rgba(236,29,140,0.18); box-shadow: 0 6px 18px rgba(236,29,140,0.08); display: flex; flex-direction: column; gap: 4px; }
.sb-col-c strong { font-size: 24px; font-weight: 800; color: #2a0e2c; letter-spacing: -0.02em; line-height: 1; }
.sb-col-c span { font-size: 11px; color: #8c5a78; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
  .sb-col, .sb-col-tlabel, .sb-col-lbl, .sb-col-burger i, .sb-col-name { transition: none; }
}
@media (max-width: 720px) {
  .sb-col, .sb-col:has(.sb-col-cb:checked) { grid-template-columns: 64px 1fr; }
  .sb-col-cards { grid-template-columns: 1fr; }
}

<div class="sb-col">
  <input id="sb-col-t" class="sb-col-cb" type="checkbox" aria-label="Toggle sidebar" />
  <aside class="sb-col-side" aria-label="Primary">
    <label class="sb-col-toggle" for="sb-col-t" aria-controls="sb-col-nav">
      <span class="sb-col-burger" aria-hidden="true"><i></i><i></i><i></i></span>
      <span class="sb-col-tlabel">Collapse</span>
    </label>
    <a class="sb-col-brand" href="#!">
      <span class="sb-col-mark" aria-hidden="true"></span>
      <span class="sb-col-name">Ember<small>Studios</small></span>
    </a>
    <nav id="sb-col-nav" aria-label="Primary">
      <ul>
        <li><a href="#!" aria-current="page"><span class="sb-col-ico" aria-hidden="true">◉</span><span class="sb-col-lbl">Dashboard</span></a></li>
        <li><a href="#!"><span class="sb-col-ico" aria-hidden="true">▣</span><span class="sb-col-lbl">Projects</span></a></li>
        <li><a href="#!"><span class="sb-col-ico" aria-hidden="true">◌</span><span class="sb-col-lbl">Crew</span></a></li>
        <li><a href="#!"><span class="sb-col-ico" aria-hidden="true">▤</span><span class="sb-col-lbl">Library</span></a></li>
        <li><a href="#!"><span class="sb-col-ico" aria-hidden="true">⚙</span><span class="sb-col-lbl">Settings</span></a></li>
      </ul>
    </nav>
  </aside>
  <main class="sb-col-main">
    <span class="sb-col-eye">▸ Workspace</span>
    <h2>Slow burn,<br/>bright ideas.</h2>
    <p>Toggle the burger to collapse the sidebar. No JavaScript — <code>:has(:checked)</code> on the grid template animates the columns; labels fade and the burger morphs into a chevron.</p>
    <div class="sb-col-cards">
      <div class="sb-col-c"><strong>184</strong><span>Ideas this week</span></div>
      <div class="sb-col-c"><strong>4.2k</strong><span>Followers</span></div>
    </div>
  </main>
</div>

Live preview Edit any tab — preview updates live Ready