Collapsible Icon Rail Sidebars in CSS, Bootstrap & Tailwind

Open demo

CSS code

HTML

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-collapse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m11.5 6-6 6 6 6M18.5 6l-6 6 6 6"/></symbol>
  <symbol id="i-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></symbol>
  <symbol id="i-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8.5" r="3.5"/><path d="M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5"/><path d="M16 5.2a3.3 3.3 0 0 1 0 6.6M18 14.8c2 .6 3.2 2.3 3.5 5.2"/></symbol>
  <symbol id="i-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1 1 0 0 1 0 1.4l-7.3 7.3a1 1 0 0 1-1.4 0z"/><circle cx="8" cy="8" r="1.4"/></symbol>
  <symbol id="i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
  <symbol id="i-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16h16"/><path d="M8.5 16v-4M12.5 16V8M16.5 16v-6"/></symbol>
  <symbol id="i-trend" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 17 9 11.5l4 4 7.5-7.5"/><path d="M15 8h5.5v5.5"/></symbol>
  <symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></symbol>
  <symbol id="i-help" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M9.6 9.5a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.2-2.4 3.7"/><path d="M12 17.3h.01"/></symbol>
  <symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="i-inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5h5l1.5 2.5h4l1.5-2.5h5"/><path d="M5.8 5.5h12.4l2.3 8v5.5a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1v-5.5z"/></symbol>
  <symbol id="i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 4 2.5 5 5.5.8-4 3.9.9 5.5L12 16.6l-4.9 2.6.9-5.5-4-3.9L9.5 9z"/></symbol>
  <symbol id="i-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 3.5 10 14M20.5 3.5l-6.5 17-4-6.5-6.5-4z"/></symbol>
  <symbol id="i-file" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 3.5h7l4 4v12a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-15a1 1 0 0 1 1-1z"/><path d="M13.5 3.5v4h4"/></symbol>
  <symbol id="i-archive" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4" width="17" height="5" rx="1.2"/><path d="M5 9v9.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V9M10 13h4"/></symbol>
  <symbol id="i-zap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3 5 13.5h6.5L11 21l8-10.5h-6.5z"/></symbol>
  <symbol id="i-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3.5 8.5 4.5L12 12.5 3.5 8z"/><path d="m3.5 12 8.5 4.5 8.5-4.5M3.5 16l8.5 4.5 8.5-4.5"/></symbol>
</svg>
<div><span class="lbl">Collapsible: full sidebar to icon rail</span>
<div class="app">
  <nav class="cs" id="orbit-nav" aria-label="Orbit CRM">
    <div class="cs-top">
      <a class="cs-brand" href="#"><span class="cs-logo" aria-hidden="true">O</span><span class="cs-name">Orbit CRM</span></a>
      <button class="cs-toggle" type="button" aria-label="Collapse sidebar" aria-pressed="false" aria-controls="orbit-nav" data-sidebar-toggle><svg aria-hidden="true"><use href="#i-collapse"/></svg></button>
    </div>
    <p class="cs-heading"><span>Main</span></p>
    <ul class="cs-list">
      <li><a class="cs-link" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-grid"/></svg><span class="cs-label">Dashboard</span></a></li>
      <li><a class="cs-link" href="#"><svg aria-hidden="true"><use href="#i-users"/></svg><span class="cs-label">Contacts</span></a></li>
      <li><a class="cs-link" href="#"><svg aria-hidden="true"><use href="#i-tag"/></svg><span class="cs-label">Deals</span><span class="cs-count">7<span class="sr-only"> closing this week</span></span></a></li>
      <li><a class="cs-link" href="#"><svg aria-hidden="true"><use href="#i-calendar"/></svg><span class="cs-label">Calendar</span></a></li>
    </ul>
    <p class="cs-heading"><span>Insights</span></p>
    <ul class="cs-list">
      <li><a class="cs-link" href="#"><svg aria-hidden="true"><use href="#i-chart"/></svg><span class="cs-label">Reports</span></a></li>
      <li><a class="cs-link" href="#"><svg aria-hidden="true"><use href="#i-trend"/></svg><span class="cs-label">Forecasts</span></a></li>
    </ul>
    <ul class="cs-list cs-foot">
      <li><a class="cs-link" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg><span class="cs-label">Settings</span></a></li>
      <li><a class="cs-link" href="#"><svg aria-hidden="true"><use href="#i-help"/></svg><span class="cs-label">Help</span></a></li>
    </ul>
  </nav>
  <div class="pg" style="--pg-bar:#ddd6fe">
    <div class="pg-head"><div><p class="pg-kicker">Orbit CRM · Q4 pipeline</p><h2 class="pg-title">Dashboard</h2></div><span class="pg-chip">Owner: Priya Nair</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Open deals</span><b>42</b></div><div class="pg-tile"><span>Pipeline value</span><b>$1.28M</b><em>+9.0%</em></div><div class="pg-tile"><span>Win rate</span><b>31%</b><em>+3 pts</em></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:44%"></i><i style="height:58%"></i><i style="height:50%"></i><i style="height:66%"></i><i style="height:72%"></i><i style="height:60%"></i><i style="height:80%"></i><i style="height:76%"></i><i style="height:64%"></i><i style="height:88%"></i><i style="height:70%"></i><i style="height:92%"></i></div>
  </div>
</div></div>
<div><span class="lbl">Labelled rail with a compose button</span>
<div class="app">
  <nav class="nr" aria-label="Postbox">
    <button class="nr-fab" type="button" aria-label="Compose"><svg aria-hidden="true"><use href="#i-plus"/></svg></button>
    <ul class="nr-list">
      <li><a class="nr-link" href="#" aria-current="page"><span class="nr-ico"><svg aria-hidden="true"><use href="#i-inbox"/></svg><span class="nr-badge">24<span class="sr-only"> unread</span></span></span>Inbox</a></li>
      <li><a class="nr-link" href="#"><span class="nr-ico"><svg aria-hidden="true"><use href="#i-star"/></svg></span>Starred</a></li>
      <li><a class="nr-link" href="#"><span class="nr-ico"><svg aria-hidden="true"><use href="#i-send"/></svg></span>Sent</a></li>
      <li><a class="nr-link" href="#"><span class="nr-ico"><svg aria-hidden="true"><use href="#i-file"/></svg></span>Drafts</a></li>
      <li><a class="nr-link" href="#"><span class="nr-ico"><svg aria-hidden="true"><use href="#i-archive"/></svg></span>Archive</a></li>
    </ul>
    <ul class="nr-list nr-foot">
      <li><a class="nr-link" href="#"><span class="nr-ico"><svg aria-hidden="true"><use href="#i-sliders"/></svg></span>Settings</a></li>
    </ul>
  </nav>
  <div class="pg" style="--pg-bar:#99f6e4">
    <div class="pg-head"><div><p class="pg-kicker">Postbox · Inbox</p><h2 class="pg-title">24 unread messages</h2></div><span class="pg-chip">Newest first</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>From clients</span><b>9</b></div><div class="pg-tile"><span>Needs a reply</span><b>5</b></div><div class="pg-tile"><span>Snoozed</span><b>3</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:52%"></i><i style="height:40%"></i><i style="height:64%"></i><i style="height:58%"></i><i style="height:70%"></i><i style="height:46%"></i><i style="height:62%"></i><i style="height:74%"></i><i style="height:56%"></i><i style="height:68%"></i><i style="height:50%"></i><i style="height:60%"></i></div>
  </div>
</div></div>
<div><span class="lbl">Rail that expands on hover or focus</span>
<div class="app">
  <div class="hx">
    <nav class="hx-nav" aria-label="Pulse analytics">
      <a class="hx-brand" href="#"><span class="hx-logo" aria-hidden="true">P</span><span class="hx-text">Pulse</span></a>
      <ul class="hx-list">
        <li><a class="hx-link" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-grid"/></svg><span class="hx-text">Overview</span></a></li>
        <li><a class="hx-link" href="#"><svg aria-hidden="true"><use href="#i-zap"/></svg><span class="hx-text">Realtime</span></a></li>
        <li><a class="hx-link" href="#"><svg aria-hidden="true"><use href="#i-users"/></svg><span class="hx-text">Audiences</span></a></li>
        <li><a class="hx-link" href="#"><svg aria-hidden="true"><use href="#i-layers"/></svg><span class="hx-text">Funnels</span></a></li>
        <li><a class="hx-link" href="#"><svg aria-hidden="true"><use href="#i-chart"/></svg><span class="hx-text">Reports</span></a></li>
      </ul>
      <ul class="hx-list hx-foot">
        <li><a class="hx-link" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg><span class="hx-text">Settings</span></a></li>
        <li><a class="hx-link hx-user" href="#"><span class="hx-avatar" aria-hidden="true">JW</span><span class="hx-text">Jonas Weber<small>Account and billing</small></span></a></li>
      </ul>
    </nav>
  </div>
  <div class="pg" style="--pg-bar:#a5f3fc">
    <div class="pg-head"><div><p class="pg-kicker">Pulse analytics · shop.lumen.co</p><h2 class="pg-title">Overview</h2></div><span class="pg-chip">318 visitors now</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Visitors</span><b>48.2k</b><em>+6.3%</em></div><div class="pg-tile"><span>Bounce rate</span><b>41%</b></div><div class="pg-tile"><span>Avg. session</span><b>3m 12s</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:36%"></i><i style="height:50%"></i><i style="height:62%"></i><i style="height:48%"></i><i style="height:70%"></i><i style="height:84%"></i><i style="height:66%"></i><i style="height:58%"></i><i style="height:76%"></i><i style="height:90%"></i><i style="height:72%"></i><i style="height:80%"></i></div>
  </div>
</div></div>

CSS

/* App shell */
.app{position:relative;display:flex;height:520px;background:#fff;border:1px solid #d6dce5;border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 18px 40px -22px rgba(15,23,42,.28)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 1. Collapsible sidebar: data-collapsed turns it into a 72px icon rail; labels become tooltips. */
.cs{--cs-accent:#7c3aed;--cs-active-bg:#f3edff;--cs-active-ink:#6d28d9;--cs-ink:#475569;--cs-strong:#0f172a;
  --cs-muted:#5b6474;--cs-line:#e5e9f0;--cs-hover:#f1f5f9;--cs-tip:#1e1b2e;
  flex:none;width:240px;display:flex;flex-direction:column;padding:16px 12px;background:#fff;
  border-right:1px solid var(--cs-line);font-size:.875rem;transition:width .22s ease}
.cs-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 14px 6px}
.cs-brand{display:flex;align-items:center;gap:10px;min-width:0;border-radius:8px;color:var(--cs-strong);
  font-size:1rem;font-weight:700;text-decoration:none;white-space:nowrap}
.cs-logo{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;font-size:.85rem;font-weight:800}
.cs-toggle{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid #d3d9e2;border-radius:8px;
  background:#fff;color:var(--cs-ink);cursor:pointer;transition:background-color .15s,color .15s}
.cs-toggle:hover{background:var(--cs-hover);color:var(--cs-strong)}
.cs-toggle svg{width:16px;height:16px;transition:transform .22s}
.cs-heading{margin:14px 0 6px;padding:0 10px;font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cs-muted);white-space:nowrap}
.cs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cs-link{position:relative;display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px;color:var(--cs-ink);
  font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.cs-link svg{width:20px;height:20px;flex:none}
.cs-link:hover{background:var(--cs-hover);color:var(--cs-strong)}
.cs-link[aria-current="page"]{background:var(--cs-active-bg);color:var(--cs-active-ink);font-weight:600}
.cs-count{margin-left:auto;padding:0 7px;border-radius:999px;background:var(--cs-accent);color:#fff;font-size:.7rem;font-weight:700;line-height:1.6}
.cs a:focus-visible,.cs button:focus-visible{outline:2px solid var(--cs-accent);outline-offset:2px}
.cs-foot{margin-top:auto}
.cs[data-collapsed]{width:72px}
.cs[data-collapsed] .cs-top{flex-direction:column;gap:12px;padding:0 0 10px}
.cs[data-collapsed] .cs-toggle svg{transform:rotate(180deg)}
.cs[data-collapsed] .cs-name,.cs[data-collapsed] .cs-heading span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.cs[data-collapsed] .cs-heading{height:1px;margin:12px 10px;padding:0;background:var(--cs-line)}
.cs[data-collapsed] .cs-link{justify-content:center;padding:10px}
.cs[data-collapsed] .cs-count{position:absolute;top:2px;right:3px;padding:0 5px;font-size:.625rem}
.cs[data-collapsed] .cs-label{position:absolute;z-index:5;left:calc(100% + 14px);top:50%;transform:translateY(-50%);
  padding:5px 9px;border-radius:7px;background:var(--cs-tip);color:#fff;font-size:.78rem;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .15s}
.cs[data-collapsed] .cs-link:hover .cs-label,.cs[data-collapsed] .cs-link:focus-visible .cs-label{opacity:1}

/* 2. Labelled rail: icon in a pill indicator with the label underneath. */
.nr{--nr-accent:#0f766e;--nr-pill:#c3ebe2;--nr-ink:#3b4a47;--nr-strong:#10201c;
  flex:none;width:88px;display:flex;flex-direction:column;align-items:center;padding:16px 0;background:#eef5f3;border-right:1px solid #d8e6e2}
.nr-fab{display:grid;place-items:center;width:52px;height:52px;margin-bottom:18px;padding:0;border:0;border-radius:16px;background:var(--nr-accent);
  color:#fff;cursor:pointer;box-shadow:0 8px 18px -8px rgba(15,118,110,.8);transition:background-color .15s}
.nr-fab:hover{background:#115e59}
.nr-fab svg{width:22px;height:22px}
.nr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;width:100%}
.nr-link{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 6px;padding:2px 0;border-radius:12px;color:var(--nr-ink);
  font-size:.72rem;font-weight:600;text-decoration:none}
.nr-ico{position:relative;display:grid;place-items:center;width:56px;height:32px;border-radius:999px;transition:background-color .15s}
.nr-ico svg{width:20px;height:20px}
.nr-link:hover .nr-ico{background:#dbebe7}
.nr-link[aria-current="page"]{color:var(--nr-strong)}
.nr-link[aria-current="page"] .nr-ico{background:var(--nr-pill);color:#134e4a}
.nr-badge{position:absolute;top:-2px;left:32px;min-width:18px;padding:0 5px;border-radius:999px;background:#b42318;color:#fff;
  font-size:.625rem;font-weight:700;line-height:16px;text-align:center}
.nr a:focus-visible,.nr button:focus-visible{outline:2px solid var(--nr-accent);outline-offset:2px}
.nr-foot{margin-top:auto}

/* 3. Hover rail: a 68px rail that widens over the content on :hover or :focus-within. */
.hx{position:relative;flex:none;width:68px}
.hx-nav{--hx-accent:#5eead4;position:absolute;z-index:3;top:0;bottom:0;left:0;width:68px;display:flex;flex-direction:column;
  padding:14px 10px;overflow:hidden;background:#111827;color:#cbd5e1;font-size:.875rem;
  transition:width .24s cubic-bezier(.4,0,.2,1),box-shadow .24s}
.hx:hover .hx-nav,.hx-nav:focus-within{width:232px;box-shadow:18px 0 40px -14px rgba(2,6,23,.6)}
.hx-brand{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:4px 7px;border-radius:10px;color:#fff;
  font-weight:700;text-decoration:none;white-space:nowrap}
.hx-logo{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,#2dd4bf,#0ea5e9);color:#062a2a;font-size:.85rem;font-weight:800}
.hx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.hx-link{display:flex;align-items:center;gap:16px;padding:10px 14px;border-radius:10px;color:#cbd5e1;font-weight:500;
  text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.hx-link svg{width:20px;height:20px;flex:none}
.hx-link:hover{background:rgba(255,255,255,.07);color:#fff}
.hx-link[aria-current="page"]{background:rgba(45,212,191,.16);color:#5eead4}
.hx-text{opacity:0;transition:opacity .16s}
.hx:hover .hx-text,.hx-nav:focus-within .hx-text{opacity:1}
.hx-nav a:focus-visible{outline:2px solid var(--hx-accent);outline-offset:-2px}
.hx-foot{margin-top:auto}
.hx-user{padding:8px 11px;gap:13px}
.hx-avatar{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#f59e0b;color:#1c1204;font-size:.66rem;font-weight:800}
.hx-user small{display:block;font-size:.72rem;color:#9ca3af}

@media (max-width:640px){
  .app:has(.cs){padding-left:72px}
  .cs{position:absolute;z-index:3;top:0;bottom:0;left:0;box-shadow:12px 0 32px -16px rgba(15,23,42,.35)}
  .cs[data-collapsed]{box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .cs,.cs-toggle,.cs-toggle svg,.cs-link,.cs-label,.nr-fab,.nr-ico,.hx-nav,.hx-link,.hx-text{transition:none}
}

JavaScript

// Collapsible sidebar: the button toggles data-collapsed on the sidebar it controls, and aria-pressed with it.
document.querySelectorAll('[data-sidebar-toggle]').forEach(function (btn) {
  var sidebar = document.getElementById(btn.getAttribute('aria-controls'));
  if (!sidebar) return;
  btn.addEventListener('click', function () {
    var collapse = !sidebar.hasAttribute('data-collapsed');
    sidebar.toggleAttribute('data-collapsed', collapse);
    btn.setAttribute('aria-pressed', String(collapse));
  });
});

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-collapse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m11.5 6-6 6 6 6M18.5 6l-6 6 6 6"/></symbol>
  <symbol id="i-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></symbol>
  <symbol id="i-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8.5" r="3.5"/><path d="M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5"/><path d="M16 5.2a3.3 3.3 0 0 1 0 6.6M18 14.8c2 .6 3.2 2.3 3.5 5.2"/></symbol>
  <symbol id="i-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1 1 0 0 1 0 1.4l-7.3 7.3a1 1 0 0 1-1.4 0z"/><circle cx="8" cy="8" r="1.4"/></symbol>
  <symbol id="i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
  <symbol id="i-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16h16"/><path d="M8.5 16v-4M12.5 16V8M16.5 16v-6"/></symbol>
  <symbol id="i-trend" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 17 9 11.5l4 4 7.5-7.5"/><path d="M15 8h5.5v5.5"/></symbol>
  <symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></symbol>
  <symbol id="i-help" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M9.6 9.5a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.2-2.4 3.7"/><path d="M12 17.3h.01"/></symbol>
  <symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="i-inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5h5l1.5 2.5h4l1.5-2.5h5"/><path d="M5.8 5.5h12.4l2.3 8v5.5a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1v-5.5z"/></symbol>
  <symbol id="i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 4 2.5 5 5.5.8-4 3.9.9 5.5L12 16.6l-4.9 2.6.9-5.5-4-3.9L9.5 9z"/></symbol>
  <symbol id="i-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 3.5 10 14M20.5 3.5l-6.5 17-4-6.5-6.5-4z"/></symbol>
  <symbol id="i-file" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 3.5h7l4 4v12a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-15a1 1 0 0 1 1-1z"/><path d="M13.5 3.5v4h4"/></symbol>
  <symbol id="i-archive" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4" width="17" height="5" rx="1.2"/><path d="M5 9v9.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V9M10 13h4"/></symbol>
  <symbol id="i-zap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3 5 13.5h6.5L11 21l8-10.5h-6.5z"/></symbol>
  <symbol id="i-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3.5 8.5 4.5L12 12.5 3.5 8z"/><path d="m3.5 12 8.5 4.5 8.5-4.5M3.5 16l8.5 4.5 8.5-4.5"/></symbol>
</svg>
<div><span class="lbl">Collapsible: full sidebar to icon rail</span>
<div class="app">
  <nav class="cs" id="orbit-nav" aria-label="Orbit CRM">
    <div class="cs-top">
      <a class="cs-brand" href="#"><span class="cs-logo" aria-hidden="true">O</span><span class="cs-name">Orbit CRM</span></a>
      <button class="btn cs-toggle" type="button" aria-label="Collapse sidebar" aria-pressed="false" aria-controls="orbit-nav" data-sidebar-toggle><svg aria-hidden="true"><use href="#i-collapse"/></svg></button>
    </div>
    <p class="cs-heading"><span>Main</span></p>
    <ul class="nav flex-column">
      <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-grid"/></svg><span class="cs-label">Dashboard</span></a></li>
      <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-users"/></svg><span class="cs-label">Contacts</span></a></li>
      <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-tag"/></svg><span class="cs-label">Deals</span><span class="badge rounded-pill">7<span class="visually-hidden"> closing this week</span></span></a></li>
      <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-calendar"/></svg><span class="cs-label">Calendar</span></a></li>
    </ul>
    <p class="cs-heading"><span>Insights</span></p>
    <ul class="nav flex-column">
      <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-chart"/></svg><span class="cs-label">Reports</span></a></li>
      <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-trend"/></svg><span class="cs-label">Forecasts</span></a></li>
    </ul>
    <ul class="nav flex-column cs-foot">
      <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg><span class="cs-label">Settings</span></a></li>
      <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-help"/></svg><span class="cs-label">Help</span></a></li>
    </ul>
  </nav>
  <div class="pg" style="--pg-bar:#ddd6fe">
    <div class="pg-head"><div><p class="pg-kicker">Orbit CRM · Q4 pipeline</p><h2 class="pg-title">Dashboard</h2></div><span class="pg-chip">Owner: Priya Nair</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Open deals</span><b>42</b></div><div class="pg-tile"><span>Pipeline value</span><b>$1.28M</b><em>+9.0%</em></div><div class="pg-tile"><span>Win rate</span><b>31%</b><em>+3 pts</em></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:44%"></i><i style="height:58%"></i><i style="height:50%"></i><i style="height:66%"></i><i style="height:72%"></i><i style="height:60%"></i><i style="height:80%"></i><i style="height:76%"></i><i style="height:64%"></i><i style="height:88%"></i><i style="height:70%"></i><i style="height:92%"></i></div>
  </div>
</div></div>
<div><span class="lbl">Labelled rail with a compose button</span>
<div class="app">
  <nav class="nr" aria-label="Postbox">
    <button class="btn nr-fab" type="button" aria-label="Compose"><svg aria-hidden="true"><use href="#i-plus"/></svg></button>
    <ul class="nav flex-column">
      <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="nr-ico"><svg aria-hidden="true"><use href="#i-inbox"/></svg><span class="badge rounded-pill">24<span class="visually-hidden"> unread</span></span></span>Inbox</a></li>
      <li class="nav-item"><a class="nav-link" href="#"><span class="nr-ico"><svg aria-hidden="true"><use href="#i-star"/></svg></span>Starred</a></li>
      <li class="nav-item"><a class="nav-link" href="#"><span class="nr-ico"><svg aria-hidden="true"><use href="#i-send"/></svg></span>Sent</a></li>
      <li class="nav-item"><a class="nav-link" href="#"><span class="nr-ico"><svg aria-hidden="true"><use href="#i-file"/></svg></span>Drafts</a></li>
      <li class="nav-item"><a class="nav-link" href="#"><span class="nr-ico"><svg aria-hidden="true"><use href="#i-archive"/></svg></span>Archive</a></li>
    </ul>
    <ul class="nav flex-column nr-foot">
      <li class="nav-item"><a class="nav-link" href="#"><span class="nr-ico"><svg aria-hidden="true"><use href="#i-sliders"/></svg></span>Settings</a></li>
    </ul>
  </nav>
  <div class="pg" style="--pg-bar:#99f6e4">
    <div class="pg-head"><div><p class="pg-kicker">Postbox · Inbox</p><h2 class="pg-title">24 unread messages</h2></div><span class="pg-chip">Newest first</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>From clients</span><b>9</b></div><div class="pg-tile"><span>Needs a reply</span><b>5</b></div><div class="pg-tile"><span>Snoozed</span><b>3</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:52%"></i><i style="height:40%"></i><i style="height:64%"></i><i style="height:58%"></i><i style="height:70%"></i><i style="height:46%"></i><i style="height:62%"></i><i style="height:74%"></i><i style="height:56%"></i><i style="height:68%"></i><i style="height:50%"></i><i style="height:60%"></i></div>
  </div>
</div></div>
<div><span class="lbl">Rail that expands on hover or focus</span>
<div class="app">
  <div class="hx">
    <nav class="hx-nav" aria-label="Pulse analytics">
      <a class="hx-brand" href="#"><span class="hx-logo" aria-hidden="true">P</span><span class="hx-text">Pulse</span></a>
      <ul class="nav flex-column">
        <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-grid"/></svg><span class="hx-text">Overview</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-zap"/></svg><span class="hx-text">Realtime</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-users"/></svg><span class="hx-text">Audiences</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-layers"/></svg><span class="hx-text">Funnels</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-chart"/></svg><span class="hx-text">Reports</span></a></li>
      </ul>
      <ul class="nav flex-column hx-foot">
        <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg><span class="hx-text">Settings</span></a></li>
        <li class="nav-item"><a class="nav-link hx-user" href="#"><span class="hx-avatar" aria-hidden="true">JW</span><span class="hx-text">Jonas Weber<small>Account and billing</small></span></a></li>
      </ul>
    </nav>
  </div>
  <div class="pg" style="--pg-bar:#a5f3fc">
    <div class="pg-head"><div><p class="pg-kicker">Pulse analytics · shop.lumen.co</p><h2 class="pg-title">Overview</h2></div><span class="pg-chip">318 visitors now</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Visitors</span><b>48.2k</b><em>+6.3%</em></div><div class="pg-tile"><span>Bounce rate</span><b>41%</b></div><div class="pg-tile"><span>Avg. session</span><b>3m 12s</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:36%"></i><i style="height:50%"></i><i style="height:62%"></i><i style="height:48%"></i><i style="height:70%"></i><i style="height:84%"></i><i style="height:66%"></i><i style="height:58%"></i><i style="height:76%"></i><i style="height:90%"></i><i style="height:72%"></i><i style="height:80%"></i></div>
  </div>
</div></div>

CSS

/* App shell. The link lists are Bootstrap .nav components; the rest is the same small stylesheet as the plain version. */
.app{position:relative;display:flex;height:520px;background:#fff;border:1px solid #d6dce5;border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 18px 40px -22px rgba(15,23,42,.28)}

/* 1. Collapsible sidebar: data-collapsed turns it into a 72px icon rail; labels become tooltips. */
.cs{--cs-accent:#7c3aed;--cs-active-bg:#f3edff;--cs-active-ink:#6d28d9;--cs-ink:#475569;--cs-strong:#0f172a;
  --cs-muted:#5b6474;--cs-line:#e5e9f0;--cs-hover:#f1f5f9;--cs-tip:#1e1b2e;
  flex:none;width:240px;display:flex;flex-direction:column;padding:16px 12px;background:#fff;
  border-right:1px solid var(--cs-line);font-size:.875rem;transition:width .22s ease}
.cs-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 14px 6px}
.cs-brand{display:flex;align-items:center;gap:10px;min-width:0;border-radius:8px;color:var(--cs-strong);
  font-size:1rem;font-weight:700;text-decoration:none;white-space:nowrap}
.cs-logo{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;font-size:.85rem;font-weight:800}
.cs-toggle{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid #d3d9e2;border-radius:8px;
  background:#fff;color:var(--cs-ink);cursor:pointer;transition:background-color .15s,color .15s}
.cs-toggle:hover{background:var(--cs-hover);color:var(--cs-strong)}
.cs-toggle svg{width:16px;height:16px;transition:transform .22s}
.cs-heading{margin:14px 0 6px;padding:0 10px;font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cs-muted);white-space:nowrap}
.cs .nav{gap:2px;flex-wrap:nowrap}
.cs .nav-link{position:relative;line-height:1.5;display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px;color:var(--cs-ink);
  font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.cs .nav-link svg{width:20px;height:20px;flex:none}
.cs .nav-link:hover{background:var(--cs-hover);color:var(--cs-strong)}
.cs .nav-link[aria-current="page"]{background:var(--cs-active-bg);color:var(--cs-active-ink);font-weight:600}
.cs .badge{margin-left:auto;padding:0 7px;border-radius:999px;background:var(--cs-accent);color:#fff;font-size:.7rem;font-weight:700;line-height:1.6}
.cs a:focus-visible,.cs button:focus-visible{outline:2px solid var(--cs-accent);outline-offset:2px}
.cs-foot{margin-top:auto}
.cs[data-collapsed]{width:72px}
.cs[data-collapsed] .cs-top{flex-direction:column;gap:12px;padding:0 0 10px}
.cs[data-collapsed] .cs-toggle svg{transform:rotate(180deg)}
.cs[data-collapsed] .cs-name,.cs[data-collapsed] .cs-heading span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.cs[data-collapsed] .cs-heading{height:1px;margin:12px 10px;padding:0;background:var(--cs-line)}
.cs[data-collapsed] .nav-link{justify-content:center;padding:10px}
.cs[data-collapsed] .badge{position:absolute;top:2px;right:3px;padding:0 5px;font-size:.625rem}
.cs[data-collapsed] .cs-label{position:absolute;z-index:5;left:calc(100% + 14px);top:50%;transform:translateY(-50%);
  padding:5px 9px;border-radius:7px;background:var(--cs-tip);color:#fff;font-size:.78rem;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .15s}
.cs[data-collapsed] .nav-link:hover .cs-label,.cs[data-collapsed] .nav-link:focus-visible .cs-label{opacity:1}

/* 2. Labelled rail: icon in a pill indicator with the label underneath. */
.nr{--nr-accent:#0f766e;--nr-pill:#c3ebe2;--nr-ink:#3b4a47;--nr-strong:#10201c;
  flex:none;width:88px;display:flex;flex-direction:column;align-items:center;padding:16px 0;background:#eef5f3;border-right:1px solid #d8e6e2}
.nr-fab{display:grid;place-items:center;width:52px;height:52px;margin-bottom:18px;padding:0;border:0;border-radius:16px;background:var(--nr-accent);
  color:#fff;cursor:pointer;box-shadow:0 8px 18px -8px rgba(15,118,110,.8);transition:background-color .15s}
.nr-fab:hover{background:#115e59}
.nr-fab svg{width:22px;height:22px}
.nr .nav{gap:12px;width:100%;flex-wrap:nowrap}
.nr .nav-link{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 6px;padding:2px 0;border-radius:12px;color:var(--nr-ink);
  font-size:.72rem;font-weight:600;text-decoration:none}
.nr-ico{position:relative;display:grid;place-items:center;width:56px;height:32px;border-radius:999px;transition:background-color .15s}
.nr-ico svg{width:20px;height:20px}
.nr .nav-link:hover .nr-ico{background:#dbebe7}
.nr .nav-link[aria-current="page"]{color:var(--nr-strong)}
.nr .nav-link[aria-current="page"] .nr-ico{background:var(--nr-pill);color:#134e4a}
.nr .badge{position:absolute;top:-2px;left:32px;min-width:18px;padding:0 5px;border-radius:999px;background:#b42318;color:#fff;
  font-size:.625rem;font-weight:700;line-height:16px;text-align:center}
.nr a:focus-visible,.nr button:focus-visible{outline:2px solid var(--nr-accent);outline-offset:2px}
.nr-foot{margin-top:auto}

/* 3. Hover rail: a 68px rail that widens over the content on :hover or :focus-within. */
.hx{position:relative;flex:none;width:68px}
.hx-nav{--hx-accent:#5eead4;position:absolute;z-index:3;top:0;bottom:0;left:0;width:68px;display:flex;flex-direction:column;
  padding:14px 10px;overflow:hidden;background:#111827;color:#cbd5e1;font-size:.875rem;
  transition:width .24s cubic-bezier(.4,0,.2,1),box-shadow .24s}
.hx:hover .hx-nav,.hx-nav:focus-within{width:232px;box-shadow:18px 0 40px -14px rgba(2,6,23,.6)}
.hx-brand{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:4px 7px;border-radius:10px;color:#fff;
  font-weight:700;text-decoration:none;white-space:nowrap}
.hx-logo{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,#2dd4bf,#0ea5e9);color:#062a2a;font-size:.85rem;font-weight:800}
.hx .nav{gap:4px;flex-wrap:nowrap}
.hx .nav-link{display:flex;align-items:center;gap:16px;padding:10px 14px;border-radius:10px;color:#cbd5e1;font-weight:500;
  text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.hx .nav-link svg{width:20px;height:20px;flex:none}
.hx .nav-link:hover{background:rgba(255,255,255,.07);color:#fff}
.hx .nav-link[aria-current="page"]{background:rgba(45,212,191,.16);color:#5eead4}
.hx-text{opacity:0;transition:opacity .16s}
.hx:hover .hx-text,.hx-nav:focus-within .hx-text{opacity:1}
.hx-nav a:focus-visible{outline:2px solid var(--hx-accent);outline-offset:-2px}
.hx-foot{margin-top:auto}
.hx .nav-link:focus-visible,.cs .nav-link:focus-visible,.nr .nav-link:focus-visible{box-shadow:none}
.hx .hx-user{padding:8px 11px;gap:13px}
.hx-avatar{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#f59e0b;color:#1c1204;font-size:.66rem;font-weight:800}
.hx-user small{display:block;font-size:.72rem;color:#9ca3af}

@media (max-width:640px){
  .app:has(.cs){padding-left:72px}
  .cs{position:absolute;z-index:3;top:0;bottom:0;left:0;box-shadow:12px 0 32px -16px rgba(15,23,42,.35)}
  .cs[data-collapsed]{box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .cs,.cs-toggle,.cs-toggle svg,.cs .nav-link,.cs-label,.nr-fab,.nr-ico,.hx-nav,.hx .nav-link,.hx-text{transition:none}
}

JavaScript

// Collapsible sidebar: the button toggles data-collapsed on the sidebar it controls, and aria-pressed with it.
document.querySelectorAll('[data-sidebar-toggle]').forEach(function (btn) {
  var sidebar = document.getElementById(btn.getAttribute('aria-controls'));
  if (!sidebar) return;
  btn.addEventListener('click', function () {
    var collapse = !sidebar.hasAttribute('data-collapsed');
    sidebar.toggleAttribute('data-collapsed', collapse);
    btn.setAttribute('aria-pressed', String(collapse));
  });
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-collapse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m11.5 6-6 6 6 6M18.5 6l-6 6 6 6"/></symbol>
  <symbol id="i-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></symbol>
  <symbol id="i-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8.5" r="3.5"/><path d="M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5"/><path d="M16 5.2a3.3 3.3 0 0 1 0 6.6M18 14.8c2 .6 3.2 2.3 3.5 5.2"/></symbol>
  <symbol id="i-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1 1 0 0 1 0 1.4l-7.3 7.3a1 1 0 0 1-1.4 0z"/><circle cx="8" cy="8" r="1.4"/></symbol>
  <symbol id="i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
  <symbol id="i-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16h16"/><path d="M8.5 16v-4M12.5 16V8M16.5 16v-6"/></symbol>
  <symbol id="i-trend" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 17 9 11.5l4 4 7.5-7.5"/><path d="M15 8h5.5v5.5"/></symbol>
  <symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></symbol>
  <symbol id="i-help" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M9.6 9.5a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.2-2.4 3.7"/><path d="M12 17.3h.01"/></symbol>
  <symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="i-inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5h5l1.5 2.5h4l1.5-2.5h5"/><path d="M5.8 5.5h12.4l2.3 8v5.5a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1v-5.5z"/></symbol>
  <symbol id="i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 4 2.5 5 5.5.8-4 3.9.9 5.5L12 16.6l-4.9 2.6.9-5.5-4-3.9L9.5 9z"/></symbol>
  <symbol id="i-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 3.5 10 14M20.5 3.5l-6.5 17-4-6.5-6.5-4z"/></symbol>
  <symbol id="i-file" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 3.5h7l4 4v12a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-15a1 1 0 0 1 1-1z"/><path d="M13.5 3.5v4h4"/></symbol>
  <symbol id="i-archive" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4" width="17" height="5" rx="1.2"/><path d="M5 9v9.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V9M10 13h4"/></symbol>
  <symbol id="i-zap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3 5 13.5h6.5L11 21l8-10.5h-6.5z"/></symbol>
  <symbol id="i-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3.5 8.5 4.5L12 12.5 3.5 8z"/><path d="m3.5 12 8.5 4.5 8.5-4.5M3.5 16l8.5 4.5 8.5-4.5"/></symbol>
</svg>
<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5b6474] uppercase">Collapsible: full sidebar to icon rail</span>
<div class="relative flex h-[520px] overflow-hidden rounded-2xl border border-[#d6dce5] bg-white shadow-[0_1px_2px_rgba(15,23,42,.05),0_18px_40px_-22px_rgba(15,23,42,.28)] max-[640px]:pl-[72px]">
  <nav class="group/sb flex w-[240px] flex-none flex-col border-r border-[#e5e9f0] bg-white px-3 py-4 text-[.875rem] transition-[width] duration-[220ms] ease-in-out motion-reduce:transition-none data-[collapsed]:w-[72px] max-[640px]:absolute max-[640px]:inset-y-0 max-[640px]:left-0 max-[640px]:z-[3] max-[640px]:shadow-[12px_0_32px_-16px_rgba(15,23,42,.35)] max-[640px]:data-[collapsed]:shadow-none" id="orbit-nav" aria-label="Orbit CRM">
    <div class="flex items-center justify-between gap-2 pb-3.5 pl-1.5 group-data-[collapsed]/sb:flex-col group-data-[collapsed]/sb:gap-3 group-data-[collapsed]/sb:pb-2.5 group-data-[collapsed]/sb:pl-0">
      <a class="flex min-w-0 items-center gap-2.5 rounded-lg text-[1rem] font-bold whitespace-nowrap text-[#0f172a] no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#7c3aed]" href="#"><span class="grid size-8 flex-none place-items-center rounded-[9px] bg-[linear-gradient(135deg,#8b5cf6,#6d28d9)] text-[.85rem] font-extrabold text-white" aria-hidden="true">O</span><span class="group-data-[collapsed]/sb:sr-only">Orbit CRM</span></a>
      <button class="grid size-8 flex-none cursor-pointer place-items-center rounded-lg border border-[#d3d9e2] bg-white p-0 text-[#475569] transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#7c3aed] motion-reduce:transition-none" type="button" aria-label="Collapse sidebar" aria-pressed="false" aria-controls="orbit-nav" data-sidebar-toggle><svg class="size-4 transition-transform duration-[220ms] motion-reduce:transition-none group-data-[collapsed]/sb:rotate-180" aria-hidden="true"><use href="#i-collapse"/></svg></button>
    </div>
    <p class="mx-0 mt-3.5 mb-1.5 px-2.5 text-[.6875rem] font-bold tracking-[.08em] whitespace-nowrap text-[#5b6474] uppercase group-data-[collapsed]/sb:mx-2.5 group-data-[collapsed]/sb:my-3 group-data-[collapsed]/sb:h-px group-data-[collapsed]/sb:bg-[#e5e9f0] group-data-[collapsed]/sb:p-0"><span class="group-data-[collapsed]/sb:sr-only">Main</span></p>
    <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
      <li><a class="group/link relative flex items-center gap-3 rounded-[9px] px-2.5 py-[9px] font-medium whitespace-nowrap text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#7c3aed] motion-reduce:transition-none aria-[current=page]:bg-[#f3edff] aria-[current=page]:font-semibold aria-[current=page]:text-[#6d28d9] group-data-[collapsed]/sb:justify-center group-data-[collapsed]/sb:p-2.5" href="#" aria-current="page"><svg class="size-5 flex-none" aria-hidden="true"><use href="#i-grid"/></svg><span class="group-data-[collapsed]/sb:pointer-events-none group-data-[collapsed]/sb:absolute group-data-[collapsed]/sb:top-1/2 group-data-[collapsed]/sb:left-[calc(100%+14px)] group-data-[collapsed]/sb:z-[5] group-data-[collapsed]/sb:-translate-y-1/2 group-data-[collapsed]/sb:rounded-[7px] group-data-[collapsed]/sb:bg-[#1e1b2e] group-data-[collapsed]/sb:px-[9px] group-data-[collapsed]/sb:py-[5px] group-data-[collapsed]/sb:text-[.78rem] group-data-[collapsed]/sb:font-semibold group-data-[collapsed]/sb:text-white group-data-[collapsed]/sb:opacity-0 group-data-[collapsed]/sb:transition-opacity group-data-[collapsed]/sb:duration-150 group-data-[collapsed]/sb:motion-reduce:transition-none group-data-[collapsed]/sb:group-hover/link:opacity-100 group-data-[collapsed]/sb:group-focus-visible/link:opacity-100">Dashboard</span></a></li>
      <li><a class="group/link relative flex items-center gap-3 rounded-[9px] px-2.5 py-[9px] font-medium whitespace-nowrap text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#7c3aed] motion-reduce:transition-none aria-[current=page]:bg-[#f3edff] aria-[current=page]:font-semibold aria-[current=page]:text-[#6d28d9] group-data-[collapsed]/sb:justify-center group-data-[collapsed]/sb:p-2.5" href="#"><svg class="size-5 flex-none" aria-hidden="true"><use href="#i-users"/></svg><span class="group-data-[collapsed]/sb:pointer-events-none group-data-[collapsed]/sb:absolute group-data-[collapsed]/sb:top-1/2 group-data-[collapsed]/sb:left-[calc(100%+14px)] group-data-[collapsed]/sb:z-[5] group-data-[collapsed]/sb:-translate-y-1/2 group-data-[collapsed]/sb:rounded-[7px] group-data-[collapsed]/sb:bg-[#1e1b2e] group-data-[collapsed]/sb:px-[9px] group-data-[collapsed]/sb:py-[5px] group-data-[collapsed]/sb:text-[.78rem] group-data-[collapsed]/sb:font-semibold group-data-[collapsed]/sb:text-white group-data-[collapsed]/sb:opacity-0 group-data-[collapsed]/sb:transition-opacity group-data-[collapsed]/sb:duration-150 group-data-[collapsed]/sb:motion-reduce:transition-none group-data-[collapsed]/sb:group-hover/link:opacity-100 group-data-[collapsed]/sb:group-focus-visible/link:opacity-100">Contacts</span></a></li>
      <li><a class="group/link relative flex items-center gap-3 rounded-[9px] px-2.5 py-[9px] font-medium whitespace-nowrap text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#7c3aed] motion-reduce:transition-none aria-[current=page]:bg-[#f3edff] aria-[current=page]:font-semibold aria-[current=page]:text-[#6d28d9] group-data-[collapsed]/sb:justify-center group-data-[collapsed]/sb:p-2.5" href="#"><svg class="size-5 flex-none" aria-hidden="true"><use href="#i-tag"/></svg><span class="group-data-[collapsed]/sb:pointer-events-none group-data-[collapsed]/sb:absolute group-data-[collapsed]/sb:top-1/2 group-data-[collapsed]/sb:left-[calc(100%+14px)] group-data-[collapsed]/sb:z-[5] group-data-[collapsed]/sb:-translate-y-1/2 group-data-[collapsed]/sb:rounded-[7px] group-data-[collapsed]/sb:bg-[#1e1b2e] group-data-[collapsed]/sb:px-[9px] group-data-[collapsed]/sb:py-[5px] group-data-[collapsed]/sb:text-[.78rem] group-data-[collapsed]/sb:font-semibold group-data-[collapsed]/sb:text-white group-data-[collapsed]/sb:opacity-0 group-data-[collapsed]/sb:transition-opacity group-data-[collapsed]/sb:duration-150 group-data-[collapsed]/sb:motion-reduce:transition-none group-data-[collapsed]/sb:group-hover/link:opacity-100 group-data-[collapsed]/sb:group-focus-visible/link:opacity-100">Deals</span><span class="ml-auto rounded-full bg-[#7c3aed] px-[7px] text-[.7rem] leading-[1.6] font-bold text-white group-data-[collapsed]/sb:absolute group-data-[collapsed]/sb:top-0.5 group-data-[collapsed]/sb:right-[3px] group-data-[collapsed]/sb:px-[5px] group-data-[collapsed]/sb:text-[.625rem]">7<span class="sr-only"> closing this week</span></span></a></li>
      <li><a class="group/link relative flex items-center gap-3 rounded-[9px] px-2.5 py-[9px] font-medium whitespace-nowrap text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#7c3aed] motion-reduce:transition-none aria-[current=page]:bg-[#f3edff] aria-[current=page]:font-semibold aria-[current=page]:text-[#6d28d9] group-data-[collapsed]/sb:justify-center group-data-[collapsed]/sb:p-2.5" href="#"><svg class="size-5 flex-none" aria-hidden="true"><use href="#i-calendar"/></svg><span class="group-data-[collapsed]/sb:pointer-events-none group-data-[collapsed]/sb:absolute group-data-[collapsed]/sb:top-1/2 group-data-[collapsed]/sb:left-[calc(100%+14px)] group-data-[collapsed]/sb:z-[5] group-data-[collapsed]/sb:-translate-y-1/2 group-data-[collapsed]/sb:rounded-[7px] group-data-[collapsed]/sb:bg-[#1e1b2e] group-data-[collapsed]/sb:px-[9px] group-data-[collapsed]/sb:py-[5px] group-data-[collapsed]/sb:text-[.78rem] group-data-[collapsed]/sb:font-semibold group-data-[collapsed]/sb:text-white group-data-[collapsed]/sb:opacity-0 group-data-[collapsed]/sb:transition-opacity group-data-[collapsed]/sb:duration-150 group-data-[collapsed]/sb:motion-reduce:transition-none group-data-[collapsed]/sb:group-hover/link:opacity-100 group-data-[collapsed]/sb:group-focus-visible/link:opacity-100">Calendar</span></a></li>
    </ul>
    <p class="mx-0 mt-3.5 mb-1.5 px-2.5 text-[.6875rem] font-bold tracking-[.08em] whitespace-nowrap text-[#5b6474] uppercase group-data-[collapsed]/sb:mx-2.5 group-data-[collapsed]/sb:my-3 group-data-[collapsed]/sb:h-px group-data-[collapsed]/sb:bg-[#e5e9f0] group-data-[collapsed]/sb:p-0"><span class="group-data-[collapsed]/sb:sr-only">Insights</span></p>
    <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
      <li><a class="group/link relative flex items-center gap-3 rounded-[9px] px-2.5 py-[9px] font-medium whitespace-nowrap text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#7c3aed] motion-reduce:transition-none aria-[current=page]:bg-[#f3edff] aria-[current=page]:font-semibold aria-[current=page]:text-[#6d28d9] group-data-[collapsed]/sb:justify-center group-data-[collapsed]/sb:p-2.5" href="#"><svg class="size-5 flex-none" aria-hidden="true"><use href="#i-chart"/></svg><span class="group-data-[collapsed]/sb:pointer-events-none group-data-[collapsed]/sb:absolute group-data-[collapsed]/sb:top-1/2 group-data-[collapsed]/sb:left-[calc(100%+14px)] group-data-[collapsed]/sb:z-[5] group-data-[collapsed]/sb:-translate-y-1/2 group-data-[collapsed]/sb:rounded-[7px] group-data-[collapsed]/sb:bg-[#1e1b2e] group-data-[collapsed]/sb:px-[9px] group-data-[collapsed]/sb:py-[5px] group-data-[collapsed]/sb:text-[.78rem] group-data-[collapsed]/sb:font-semibold group-data-[collapsed]/sb:text-white group-data-[collapsed]/sb:opacity-0 group-data-[collapsed]/sb:transition-opacity group-data-[collapsed]/sb:duration-150 group-data-[collapsed]/sb:motion-reduce:transition-none group-data-[collapsed]/sb:group-hover/link:opacity-100 group-data-[collapsed]/sb:group-focus-visible/link:opacity-100">Reports</span></a></li>
      <li><a class="group/link relative flex items-center gap-3 rounded-[9px] px-2.5 py-[9px] font-medium whitespace-nowrap text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#7c3aed] motion-reduce:transition-none aria-[current=page]:bg-[#f3edff] aria-[current=page]:font-semibold aria-[current=page]:text-[#6d28d9] group-data-[collapsed]/sb:justify-center group-data-[collapsed]/sb:p-2.5" href="#"><svg class="size-5 flex-none" aria-hidden="true"><use href="#i-trend"/></svg><span class="group-data-[collapsed]/sb:pointer-events-none group-data-[collapsed]/sb:absolute group-data-[collapsed]/sb:top-1/2 group-data-[collapsed]/sb:left-[calc(100%+14px)] group-data-[collapsed]/sb:z-[5] group-data-[collapsed]/sb:-translate-y-1/2 group-data-[collapsed]/sb:rounded-[7px] group-data-[collapsed]/sb:bg-[#1e1b2e] group-data-[collapsed]/sb:px-[9px] group-data-[collapsed]/sb:py-[5px] group-data-[collapsed]/sb:text-[.78rem] group-data-[collapsed]/sb:font-semibold group-data-[collapsed]/sb:text-white group-data-[collapsed]/sb:opacity-0 group-data-[collapsed]/sb:transition-opacity group-data-[collapsed]/sb:duration-150 group-data-[collapsed]/sb:motion-reduce:transition-none group-data-[collapsed]/sb:group-hover/link:opacity-100 group-data-[collapsed]/sb:group-focus-visible/link:opacity-100">Forecasts</span></a></li>
    </ul>
    <ul class="m-0 mt-auto flex list-none flex-col gap-0.5 p-0">
      <li><a class="group/link relative flex items-center gap-3 rounded-[9px] px-2.5 py-[9px] font-medium whitespace-nowrap text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#7c3aed] motion-reduce:transition-none aria-[current=page]:bg-[#f3edff] aria-[current=page]:font-semibold aria-[current=page]:text-[#6d28d9] group-data-[collapsed]/sb:justify-center group-data-[collapsed]/sb:p-2.5" href="#"><svg class="size-5 flex-none" aria-hidden="true"><use href="#i-sliders"/></svg><span class="group-data-[collapsed]/sb:pointer-events-none group-data-[collapsed]/sb:absolute group-data-[collapsed]/sb:top-1/2 group-data-[collapsed]/sb:left-[calc(100%+14px)] group-data-[collapsed]/sb:z-[5] group-data-[collapsed]/sb:-translate-y-1/2 group-data-[collapsed]/sb:rounded-[7px] group-data-[collapsed]/sb:bg-[#1e1b2e] group-data-[collapsed]/sb:px-[9px] group-data-[collapsed]/sb:py-[5px] group-data-[collapsed]/sb:text-[.78rem] group-data-[collapsed]/sb:font-semibold group-data-[collapsed]/sb:text-white group-data-[collapsed]/sb:opacity-0 group-data-[collapsed]/sb:transition-opacity group-data-[collapsed]/sb:duration-150 group-data-[collapsed]/sb:motion-reduce:transition-none group-data-[collapsed]/sb:group-hover/link:opacity-100 group-data-[collapsed]/sb:group-focus-visible/link:opacity-100">Settings</span></a></li>
      <li><a class="group/link relative flex items-center gap-3 rounded-[9px] px-2.5 py-[9px] font-medium whitespace-nowrap text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#7c3aed] motion-reduce:transition-none aria-[current=page]:bg-[#f3edff] aria-[current=page]:font-semibold aria-[current=page]:text-[#6d28d9] group-data-[collapsed]/sb:justify-center group-data-[collapsed]/sb:p-2.5" href="#"><svg class="size-5 flex-none" aria-hidden="true"><use href="#i-help"/></svg><span class="group-data-[collapsed]/sb:pointer-events-none group-data-[collapsed]/sb:absolute group-data-[collapsed]/sb:top-1/2 group-data-[collapsed]/sb:left-[calc(100%+14px)] group-data-[collapsed]/sb:z-[5] group-data-[collapsed]/sb:-translate-y-1/2 group-data-[collapsed]/sb:rounded-[7px] group-data-[collapsed]/sb:bg-[#1e1b2e] group-data-[collapsed]/sb:px-[9px] group-data-[collapsed]/sb:py-[5px] group-data-[collapsed]/sb:text-[.78rem] group-data-[collapsed]/sb:font-semibold group-data-[collapsed]/sb:text-white group-data-[collapsed]/sb:opacity-0 group-data-[collapsed]/sb:transition-opacity group-data-[collapsed]/sb:duration-150 group-data-[collapsed]/sb:motion-reduce:transition-none group-data-[collapsed]/sb:group-hover/link:opacity-100 group-data-[collapsed]/sb:group-focus-visible/link:opacity-100">Help</span></a></li>
    </ul>
  </nav>
  <div class="flex min-w-0 flex-1 flex-col gap-[18px] overflow-hidden bg-[#f8fafc] px-7 py-[26px] max-[640px]:px-[18px] max-[640px]:py-5">
    <div class="flex flex-wrap items-end justify-between gap-3"><div><p class="m-0 text-[.75rem] text-[#5b6474]">Orbit CRM · Q4 pipeline</p><h2 class="mt-0.5 mb-0 text-[1.25rem] leading-[1.3] font-bold tracking-[-.02em] text-[#0f172a]">Dashboard</h2></div><span class="rounded-full border px-3 py-[5px] text-[.75rem] font-semibold border-[#d9dfe8] bg-white text-[#334155]">Owner: Priya Nair</span></div>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-3"><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Open deals</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">42</b></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Pipeline value</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">$1.28M</b><em class="text-[.72rem] font-semibold not-italic text-[#047857]">+9.0%</em></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Win rate</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">31%</b><em class="text-[.72rem] font-semibold not-italic text-[#047857]">+3 pts</em></div></div>
    <div class="flex min-h-[110px] flex-1 items-end gap-2 rounded-xl border border-[#e2e8f0] bg-white px-4 pt-4 max-[640px]:h-[90px] max-[640px]:min-h-0 max-[640px]:flex-none" aria-hidden="true"><i class="flex-1 rounded-t-[5px] bg-[#ddd6fe] opacity-70" style="height:44%"></i><i class="flex-1 rounded-t-[5px] bg-[#ddd6fe]" style="height:58%"></i><i class="flex-1 rounded-t-[5px] bg-[#ddd6fe] opacity-70" style="height:50%"></i><i class="flex-1 rounded-t-[5px] bg-[#ddd6fe]" style="height:66%"></i><i class="flex-1 rounded-t-[5px] bg-[#ddd6fe] opacity-70" style="height:72%"></i><i class="flex-1 rounded-t-[5px] bg-[#ddd6fe]" style="height:60%"></i><i class="flex-1 rounded-t-[5px] bg-[#ddd6fe] opacity-70" style="height:80%"></i><i class="flex-1 rounded-t-[5px] bg-[#ddd6fe]" style="height:76%"></i><i class="flex-1 rounded-t-[5px] bg-[#ddd6fe] opacity-70" style="height:64%"></i><i class="flex-1 rounded-t-[5px] bg-[#ddd6fe]" style="height:88%"></i><i class="flex-1 rounded-t-[5px] bg-[#ddd6fe] opacity-70" style="height:70%"></i><i class="flex-1 rounded-t-[5px] bg-[#ddd6fe]" style="height:92%"></i></div>
  </div>
</div></div>
<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5b6474] uppercase">Labelled rail with a compose button</span>
<div class="relative flex h-[520px] overflow-hidden rounded-2xl border border-[#d6dce5] bg-white shadow-[0_1px_2px_rgba(15,23,42,.05),0_18px_40px_-22px_rgba(15,23,42,.28)]">
  <nav class="flex w-[88px] flex-none flex-col items-center border-r border-[#d8e6e2] bg-[#eef5f3] py-4" aria-label="Postbox">
    <button class="mb-[18px] grid size-[52px] cursor-pointer place-items-center rounded-2xl border-0 bg-[#0f766e] p-0 text-white shadow-[0_8px_18px_-8px_rgba(15,118,110,.8)] transition-colors duration-150 hover:bg-[#115e59] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] motion-reduce:transition-none" type="button" aria-label="Compose"><svg class="size-[22px]" aria-hidden="true"><use href="#i-plus"/></svg></button>
    <ul class="m-0 flex w-full list-none flex-col gap-3 p-0">
      <li><a class="group mx-1.5 flex flex-col items-center gap-1 rounded-xl py-0.5 text-[.72rem] font-semibold text-[#3b4a47] no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] aria-[current=page]:text-[#10201c]" href="#" aria-current="page"><span class="relative grid h-8 w-14 place-items-center rounded-full transition-colors duration-150 group-hover:bg-[#dbebe7] group-aria-[current=page]:bg-[#c3ebe2] group-aria-[current=page]:text-[#134e4a] motion-reduce:transition-none"><svg class="size-5" aria-hidden="true"><use href="#i-inbox"/></svg><span class="absolute -top-0.5 left-8 min-w-[18px] rounded-full bg-[#b42318] px-[5px] text-center text-[.625rem] leading-4 font-bold text-white">24<span class="sr-only"> unread</span></span></span>Inbox</a></li>
      <li><a class="group mx-1.5 flex flex-col items-center gap-1 rounded-xl py-0.5 text-[.72rem] font-semibold text-[#3b4a47] no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] aria-[current=page]:text-[#10201c]" href="#"><span class="relative grid h-8 w-14 place-items-center rounded-full transition-colors duration-150 group-hover:bg-[#dbebe7] group-aria-[current=page]:bg-[#c3ebe2] group-aria-[current=page]:text-[#134e4a] motion-reduce:transition-none"><svg class="size-5" aria-hidden="true"><use href="#i-star"/></svg></span>Starred</a></li>
      <li><a class="group mx-1.5 flex flex-col items-center gap-1 rounded-xl py-0.5 text-[.72rem] font-semibold text-[#3b4a47] no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] aria-[current=page]:text-[#10201c]" href="#"><span class="relative grid h-8 w-14 place-items-center rounded-full transition-colors duration-150 group-hover:bg-[#dbebe7] group-aria-[current=page]:bg-[#c3ebe2] group-aria-[current=page]:text-[#134e4a] motion-reduce:transition-none"><svg class="size-5" aria-hidden="true"><use href="#i-send"/></svg></span>Sent</a></li>
      <li><a class="group mx-1.5 flex flex-col items-center gap-1 rounded-xl py-0.5 text-[.72rem] font-semibold text-[#3b4a47] no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] aria-[current=page]:text-[#10201c]" href="#"><span class="relative grid h-8 w-14 place-items-center rounded-full transition-colors duration-150 group-hover:bg-[#dbebe7] group-aria-[current=page]:bg-[#c3ebe2] group-aria-[current=page]:text-[#134e4a] motion-reduce:transition-none"><svg class="size-5" aria-hidden="true"><use href="#i-file"/></svg></span>Drafts</a></li>
      <li><a class="group mx-1.5 flex flex-col items-center gap-1 rounded-xl py-0.5 text-[.72rem] font-semibold text-[#3b4a47] no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] aria-[current=page]:text-[#10201c]" href="#"><span class="relative grid h-8 w-14 place-items-center rounded-full transition-colors duration-150 group-hover:bg-[#dbebe7] group-aria-[current=page]:bg-[#c3ebe2] group-aria-[current=page]:text-[#134e4a] motion-reduce:transition-none"><svg class="size-5" aria-hidden="true"><use href="#i-archive"/></svg></span>Archive</a></li>
    </ul>
    <ul class="m-0 mt-auto flex w-full list-none flex-col gap-3 p-0">
      <li><a class="group mx-1.5 flex flex-col items-center gap-1 rounded-xl py-0.5 text-[.72rem] font-semibold text-[#3b4a47] no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] aria-[current=page]:text-[#10201c]" href="#"><span class="relative grid h-8 w-14 place-items-center rounded-full transition-colors duration-150 group-hover:bg-[#dbebe7] group-aria-[current=page]:bg-[#c3ebe2] group-aria-[current=page]:text-[#134e4a] motion-reduce:transition-none"><svg class="size-5" aria-hidden="true"><use href="#i-sliders"/></svg></span>Settings</a></li>
    </ul>
  </nav>
  <div class="flex min-w-0 flex-1 flex-col gap-[18px] overflow-hidden bg-[#f8fafc] px-7 py-[26px] max-[640px]:px-[18px] max-[640px]:py-5">
    <div class="flex flex-wrap items-end justify-between gap-3"><div><p class="m-0 text-[.75rem] text-[#5b6474]">Postbox · Inbox</p><h2 class="mt-0.5 mb-0 text-[1.25rem] leading-[1.3] font-bold tracking-[-.02em] text-[#0f172a]">24 unread messages</h2></div><span class="rounded-full border px-3 py-[5px] text-[.75rem] font-semibold border-[#d9dfe8] bg-white text-[#334155]">Newest first</span></div>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-3"><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">From clients</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">9</b></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Needs a reply</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">5</b></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Snoozed</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">3</b></div></div>
    <div class="flex min-h-[110px] flex-1 items-end gap-2 rounded-xl border border-[#e2e8f0] bg-white px-4 pt-4 max-[640px]:h-[90px] max-[640px]:min-h-0 max-[640px]:flex-none" aria-hidden="true"><i class="flex-1 rounded-t-[5px] bg-[#99f6e4] opacity-70" style="height:52%"></i><i class="flex-1 rounded-t-[5px] bg-[#99f6e4]" style="height:40%"></i><i class="flex-1 rounded-t-[5px] bg-[#99f6e4] opacity-70" style="height:64%"></i><i class="flex-1 rounded-t-[5px] bg-[#99f6e4]" style="height:58%"></i><i class="flex-1 rounded-t-[5px] bg-[#99f6e4] opacity-70" style="height:70%"></i><i class="flex-1 rounded-t-[5px] bg-[#99f6e4]" style="height:46%"></i><i class="flex-1 rounded-t-[5px] bg-[#99f6e4] opacity-70" style="height:62%"></i><i class="flex-1 rounded-t-[5px] bg-[#99f6e4]" style="height:74%"></i><i class="flex-1 rounded-t-[5px] bg-[#99f6e4] opacity-70" style="height:56%"></i><i class="flex-1 rounded-t-[5px] bg-[#99f6e4]" style="height:68%"></i><i class="flex-1 rounded-t-[5px] bg-[#99f6e4] opacity-70" style="height:50%"></i><i class="flex-1 rounded-t-[5px] bg-[#99f6e4]" style="height:60%"></i></div>
  </div>
</div></div>
<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5b6474] uppercase">Rail that expands on hover or focus</span>
<div class="relative flex h-[520px] overflow-hidden rounded-2xl border border-[#d6dce5] bg-white shadow-[0_1px_2px_rgba(15,23,42,.05),0_18px_40px_-22px_rgba(15,23,42,.28)]">
  <div class="group/hx relative w-[68px] flex-none">
    <nav class="absolute inset-y-0 left-0 z-[3] flex w-[68px] flex-col overflow-hidden bg-[#111827] px-2.5 py-3.5 text-[.875rem] text-[#cbd5e1] transition-[width,box-shadow] duration-[240ms] ease-[cubic-bezier(.4,0,.2,1)] group-hover/hx:w-[232px] group-hover/hx:shadow-[18px_0_40px_-14px_rgba(2,6,23,.6)] focus-within:w-[232px] focus-within:shadow-[18px_0_40px_-14px_rgba(2,6,23,.6)] motion-reduce:transition-none" aria-label="Pulse analytics">
      <a class="mb-4 flex items-center gap-3.5 rounded-[10px] px-[7px] py-1 font-bold whitespace-nowrap text-white no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#5eead4]" href="#"><span class="grid size-[34px] flex-none place-items-center rounded-[10px] bg-[linear-gradient(135deg,#2dd4bf,#0ea5e9)] text-[.85rem] font-extrabold text-[#062a2a]" aria-hidden="true">P</span><span class="opacity-0 transition-opacity duration-150 motion-reduce:transition-none group-hover/hx:opacity-100 group-focus-within/hx:opacity-100">Pulse</span></a>
      <ul class="m-0 flex list-none flex-col gap-1 p-0">
        <li><a class="flex items-center gap-4 rounded-[10px] px-3.5 py-2.5 font-medium whitespace-nowrap text-[#cbd5e1] no-underline transition-colors duration-150 hover:bg-white/7 hover:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#5eead4] motion-reduce:transition-none aria-[current=page]:bg-[rgba(45,212,191,.16)] aria-[current=page]:text-[#5eead4]" href="#" aria-current="page"><svg class="size-5 flex-none" aria-hidden="true"><use href="#i-grid"/></svg><span class="opacity-0 transition-opacity duration-150 motion-reduce:transition-none group-hover/hx:opacity-100 group-focus-within/hx:opacity-100">Overview</span></a></li>
        <li><a class="flex items-center gap-4 rounded-[10px] px-3.5 py-2.5 font-medium whitespace-nowrap text-[#cbd5e1] no-underline transition-colors duration-150 hover:bg-white/7 hover:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#5eead4] motion-reduce:transition-none aria-[current=page]:bg-[rgba(45,212,191,.16)] aria-[current=page]:text-[#5eead4]" href="#"><svg class="size-5 flex-none" aria-hidden="true"><use href="#i-zap"/></svg><span class="opacity-0 transition-opacity duration-150 motion-reduce:transition-none group-hover/hx:opacity-100 group-focus-within/hx:opacity-100">Realtime</span></a></li>
        <li><a class="flex items-center gap-4 rounded-[10px] px-3.5 py-2.5 font-medium whitespace-nowrap text-[#cbd5e1] no-underline transition-colors duration-150 hover:bg-white/7 hover:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#5eead4] motion-reduce:transition-none aria-[current=page]:bg-[rgba(45,212,191,.16)] aria-[current=page]:text-[#5eead4]" href="#"><svg class="size-5 flex-none" aria-hidden="true"><use href="#i-users"/></svg><span class="opacity-0 transition-opacity duration-150 motion-reduce:transition-none group-hover/hx:opacity-100 group-focus-within/hx:opacity-100">Audiences</span></a></li>
        <li><a class="flex items-center gap-4 rounded-[10px] px-3.5 py-2.5 font-medium whitespace-nowrap text-[#cbd5e1] no-underline transition-colors duration-150 hover:bg-white/7 hover:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#5eead4] motion-reduce:transition-none aria-[current=page]:bg-[rgba(45,212,191,.16)] aria-[current=page]:text-[#5eead4]" href="#"><svg class="size-5 flex-none" aria-hidden="true"><use href="#i-layers"/></svg><span class="opacity-0 transition-opacity duration-150 motion-reduce:transition-none group-hover/hx:opacity-100 group-focus-within/hx:opacity-100">Funnels</span></a></li>
        <li><a class="flex items-center gap-4 rounded-[10px] px-3.5 py-2.5 font-medium whitespace-nowrap text-[#cbd5e1] no-underline transition-colors duration-150 hover:bg-white/7 hover:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#5eead4] motion-reduce:transition-none aria-[current=page]:bg-[rgba(45,212,191,.16)] aria-[current=page]:text-[#5eead4]" href="#"><svg class="size-5 flex-none" aria-hidden="true"><use href="#i-chart"/></svg><span class="opacity-0 transition-opacity duration-150 motion-reduce:transition-none group-hover/hx:opacity-100 group-focus-within/hx:opacity-100">Reports</span></a></li>
      </ul>
      <ul class="m-0 mt-auto flex list-none flex-col gap-1 p-0">
        <li><a class="flex items-center gap-4 rounded-[10px] px-3.5 py-2.5 font-medium whitespace-nowrap text-[#cbd5e1] no-underline transition-colors duration-150 hover:bg-white/7 hover:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#5eead4] motion-reduce:transition-none aria-[current=page]:bg-[rgba(45,212,191,.16)] aria-[current=page]:text-[#5eead4]" href="#"><svg class="size-5 flex-none" aria-hidden="true"><use href="#i-sliders"/></svg><span class="opacity-0 transition-opacity duration-150 motion-reduce:transition-none group-hover/hx:opacity-100 group-focus-within/hx:opacity-100">Settings</span></a></li>
        <li><a class="flex items-center gap-[13px] rounded-[10px] px-[11px] py-2 font-medium whitespace-nowrap text-[#cbd5e1] no-underline transition-colors duration-150 hover:bg-white/7 hover:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#5eead4] motion-reduce:transition-none" href="#"><span class="grid size-[26px] flex-none place-items-center rounded-full bg-[#f59e0b] text-[.66rem] font-extrabold text-[#1c1204]" aria-hidden="true">JW</span><span class="opacity-0 transition-opacity duration-150 motion-reduce:transition-none group-hover/hx:opacity-100 group-focus-within/hx:opacity-100">Jonas Weber<small class="block text-[.72rem] text-[#9ca3af]">Account and billing</small></span></a></li>
      </ul>
    </nav>
  </div>
  <div class="flex min-w-0 flex-1 flex-col gap-[18px] overflow-hidden bg-[#f8fafc] px-7 py-[26px] max-[640px]:px-[18px] max-[640px]:py-5">
    <div class="flex flex-wrap items-end justify-between gap-3"><div><p class="m-0 text-[.75rem] text-[#5b6474]">Pulse analytics · shop.lumen.co</p><h2 class="mt-0.5 mb-0 text-[1.25rem] leading-[1.3] font-bold tracking-[-.02em] text-[#0f172a]">Overview</h2></div><span class="rounded-full border px-3 py-[5px] text-[.75rem] font-semibold border-[#d9dfe8] bg-white text-[#334155]">318 visitors now</span></div>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-3"><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Visitors</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">48.2k</b><em class="text-[.72rem] font-semibold not-italic text-[#047857]">+6.3%</em></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Bounce rate</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">41%</b></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Avg. session</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">3m 12s</b></div></div>
    <div class="flex min-h-[110px] flex-1 items-end gap-2 rounded-xl border border-[#e2e8f0] bg-white px-4 pt-4 max-[640px]:h-[90px] max-[640px]:min-h-0 max-[640px]:flex-none" aria-hidden="true"><i class="flex-1 rounded-t-[5px] bg-[#a5f3fc] opacity-70" style="height:36%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5f3fc]" style="height:50%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5f3fc] opacity-70" style="height:62%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5f3fc]" style="height:48%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5f3fc] opacity-70" style="height:70%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5f3fc]" style="height:84%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5f3fc] opacity-70" style="height:66%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5f3fc]" style="height:58%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5f3fc] opacity-70" style="height:76%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5f3fc]" style="height:90%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5f3fc] opacity-70" style="height:72%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5f3fc]" style="height:80%"></i></div>
  </div>
</div></div>

JavaScript

// Collapsible sidebar: the button toggles data-collapsed on the sidebar it controls, and aria-pressed with it.
document.querySelectorAll('[data-sidebar-toggle]').forEach(function (btn) {
  var sidebar = document.getElementById(btn.getAttribute('aria-controls'));
  if (!sidebar) return;
  btn.addEventListener('click', function () {
    var collapse = !sidebar.hasAttribute('data-collapsed');
    sidebar.toggleAttribute('data-collapsed', collapse);
    btn.setAttribute('aria-pressed', String(collapse));
  });
});

About this set

Three ways to give the content more room without losing the navigation. The collapsible sidebar is a CRM with a button in its header: pressing it narrows the sidebar from 240px to a 72px icon rail, turns section headings into dividers, moves the deal count onto the icon, and shows each label as a tooltip on hover or keyboard focus. The labelled rail is an 88px mail rail in the Material style, with a compose button, a pill behind the current icon, the label under every icon and an unread badge. The hover rail is a dark 68px analytics rail that widens to 232px over the content on :hover or :focus-within, while the labels fade in. Use the collapsible one when people should choose, the labelled rail for five or six destinations, and the hover rail when screen space is tight. The collapse button runs a short script that toggles a data-collapsed attribute and aria-pressed; everything else is CSS. Labels are never removed from the page, only hidden visually, so every link keeps its accessible name in both states. Below 640px the expanded sidebar overlays the content instead of squeezing it.

What’s included

Collapse button with aria-pressed and a width transition
Labels become tooltips on hover and keyboard focus when collapsed
Material-style labelled rail with a compose button and badge
Dark rail that expands on :hover and :focus-within
Labels stay in the DOM, so links keep their names in every state

Accessibility

The collapse control is a real button with aria-label="Collapse sidebar" and aria-pressed, and it names the sidebar it controls with aria-controls. When collapsed, each label is visually hidden or shown as a tooltip but stays in the accessibility tree, links in the labelled rail keep their visible text labels, and the hover rail opens for keyboard users through :focus-within. Focus outlines are visible on every control and all transitions stop under prefers-reduced-motion.

Customise it

Change the --cs-*, --nr-* and --hx-* custom properties for colours, and the width values (240px and 72px, 88px, 68px and 232px) for size. The Bootstrap version uses the same variables on top of .nav and .btn; in Tailwind edit the w-[…], data-[collapsed]: and group-hover/hx: utilities.

CSS code

Bootstrap 5 code

Tailwind 4 code

About this set

What’s included

Accessibility

Customise it

More from Sidebars