10 CSS Sidebar Navigation 03 / 10

Light & Flexible CSS Vertical Rail Menu (Collapsible)

Neon music-player vibe on near-black with lime / cyan / pink accents and an animated equalizer.

Best formusic apps, creative tool dashboards, vibrant SaaS landing pages, and any product that wants its sidebar to feel kinetic.

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

The code

<section class="sn-rai" aria-label="Vertical rail menu demo">
  <input type="checkbox" id="sn-rai-x" class="toggle" aria-label="Toggle rail">
  <nav class="rail" aria-label="Player navigation">
    <div class="mark" aria-hidden="true">◊</div>
    <a class="pill 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 class="lbl">Home</span><span class="tip">Home</span></a>
    <a class="pill" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.3-4.3"/></svg><span class="lbl">Discover</span><span class="tip">Discover</span></a>
    <a class="pill" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg><span class="lbl">Your Library</span><span class="tip">Library</span></a>
    <a class="pill" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg><span class="lbl">Saved</span><span class="tip">Saved</span></a>
    <a class="pill" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M4 11a9 9 0 019 9M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg><span class="lbl">Radio</span><span class="tip">Radio</span></a>
    <div class="spacer"></div>
    <a class="pill" 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 class="lbl">Settings</span><span class="tip">Settings</span></a>
    <label for="sn-rai-x" class="ctrl" title="Expand rail" aria-label="Expand rail">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 18l6-6-6-6" stroke-width="2" stroke-linecap="round"/></svg>
    </label>
  </nav>
  <main class="stage">
    <div class="nowplaying">
      <div class="cover" aria-hidden="true"></div>
      <div>
        <h1>Flexible Rail Menu</h1>
        <p>An expanding icon rail — bouncy, springy, collapsible.</p>
        <div class="bars" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div>
      </div>
    </div>
  </main>
</section>
/* ─── 03 Vertical Rail Menu — neon music player ───────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&family=Syne:wght@600;800&display=swap');

.sn-rai {
  --sn-rai-bg: #08070d;
  --sn-rai-rail: #0f0d18;
  --sn-rai-rail-2: #17142a;
  --sn-rai-txt: #e8e6f0;
  --sn-rai-muted: #7b7790;
  --sn-rai-neon: #c4f82a;
  --sn-rai-pink: #ff4d8c;
  --sn-rai-cyan: #39e0ff;

  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'Outfit', sans-serif;
  background:
    radial-gradient(700px 700px at 100% 100%, rgba(255,77,140,.12), transparent 60%),
    radial-gradient(700px 700px at 0% 0%, rgba(57,224,255,.1), transparent 55%),
    var(--sn-rai-bg);
  color: var(--sn-rai-txt);
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}
.sn-rai *, .sn-rai *::before, .sn-rai *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sn-rai .toggle { display: none; }
.sn-rai .rail {
  width: 84px;
  background: linear-gradient(180deg, var(--sn-rai-rail), var(--sn-rai-rail-2));
  border-right: 1px solid rgba(255,255,255,.06);
  height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 1.3rem 0; gap: .5rem;
  transition: width .35s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
  flex-shrink: 0;
}
.sn-rai .mark {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--sn-rai-neon), var(--sn-rai-cyan));
  display: grid; place-items: center; color: #08070d;
  font-family: 'Syne'; font-weight: 800; font-size: 1.3rem; margin-bottom: 1rem;
  box-shadow: 0 0 24px rgba(196,248,42,.4);
}
.sn-rai .pill {
  width: 90%; display: flex; align-items: center; gap: 1rem;
  padding: .75rem; border-radius: 14px; text-decoration: none; color: var(--sn-rai-muted);
  position: relative; transition: .25s; white-space: nowrap;
}
.sn-rai .pill svg { width: 24px; height: 24px; min-width: 24px; stroke-width: 1.8; }
.sn-rai .pill .lbl { font-size: .95rem; font-weight: 500; opacity: 0; transition: opacity .25s; }
.sn-rai .pill:hover { color: var(--sn-rai-txt); background: rgba(255,255,255,.04); }
.sn-rai .pill.active { color: var(--sn-rai-neon); background: rgba(196,248,42,.1); }
.sn-rai .pill.active::after {
  content: ""; position: absolute; right: -.65rem; top: 50%; transform: translateY(-50%);
  width: 4px; height: 60%; border-radius: 4px; background: var(--sn-rai-neon);
  box-shadow: 0 0 12px var(--sn-rai-neon);
}
.sn-rai .tip {
  position: absolute; left: 72px; top: 50%; transform: translateY(-50%) scale(.8);
  background: #fff; color: #08070d; font-size: .78rem; font-weight: 600;
  padding: .35rem .7rem; border-radius: 8px; opacity: 0; pointer-events: none;
  transition: .2s; white-space: nowrap; z-index: 5;
}
.sn-rai .pill:hover .tip { opacity: 1; transform: translateY(-50%) scale(1); }
.sn-rai .spacer { flex: 1; }
.sn-rai .ctrl {
  margin-top: .8rem; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: rgba(255,255,255,.05); border: none; cursor: pointer; color: var(--sn-rai-muted);
  display: grid; place-items: center; transition: .25s;
}
.sn-rai .ctrl:hover { color: var(--sn-rai-neon); background: rgba(196,248,42,.1); }
.sn-rai .ctrl svg { width: 22px; height: 22px; transition: transform .35s; }

/* expanded */
.sn-rai .toggle:checked ~ .rail { width: 248px; align-items: stretch; padding-left: 1rem; padding-right: 1rem; }
.sn-rai .toggle:checked ~ .rail .pill .lbl { opacity: 1; }
.sn-rai .toggle:checked ~ .rail .pill:hover .tip { display: none; }
.sn-rai .toggle:checked ~ .rail .ctrl svg { transform: rotate(180deg); }
.sn-rai .toggle:checked ~ .rail .mark { margin-left: .4rem; }

.sn-rai .stage { flex: 1; padding: 3rem; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; overflow: hidden; }
.sn-rai .nowplaying { display: flex; align-items: center; gap: 1.4rem; }
.sn-rai .cover { width: 120px; height: 120px; border-radius: 20px; flex-shrink: 0;
  background: conic-gradient(from 45deg, var(--sn-rai-pink), var(--sn-rai-cyan), var(--sn-rai-neon), var(--sn-rai-pink));
  box-shadow: 0 18px 50px rgba(255,77,140,.25); }
.sn-rai .stage h1 { font-family: 'Syne'; font-weight: 800; font-size: 2.4rem; letter-spacing: -.02em; }
.sn-rai .stage p { color: var(--sn-rai-muted); margin-top: .3rem; }
.sn-rai .bars { display: flex; gap: 4px; margin-top: 1.4rem; align-items: flex-end; height: 38px; }
.sn-rai .bars i { width: 5px; background: var(--sn-rai-neon); border-radius: 3px; animation: sn-rai-b 1s ease-in-out infinite; }
.sn-rai .bars i:nth-child(2) { animation-delay: .2s; background: var(--sn-rai-cyan); }
.sn-rai .bars i:nth-child(3) { animation-delay: .4s; background: var(--sn-rai-pink); }
.sn-rai .bars i:nth-child(4) { animation-delay: .1s; }
.sn-rai .bars i:nth-child(5) { animation-delay: .5s; background: var(--sn-rai-cyan); }
@keyframes sn-rai-b { 0%, 100% { height: 10px; } 50% { height: 38px; } }

@media (prefers-reduced-motion: reduce) {
  .sn-rai .rail, .sn-rai .pill, .sn-rai .tip { transition: none; }
  .sn-rai .bars i { animation: none; height: 24px; }
}

More from 10 CSS Sidebar Navigation

Fixed Full-Height CSS Sidebar Navigation LayoutModern Glassmorphism Floating Sidebar Design in CSSResponsive Off-Canvas Mobile Sidebar Navigation OverlayApp-Style Vertical Sidebar Menu with Bottom-Pinned ProfilePure CSS Collapsible Sidebar Navigation SnippetResponsive Sidebar Toggle with HTML and CSSResponsive Dashboard Sidebar Navigation with SubmenusMulti-Level Vertical Sidebar Menu Template in HTML/CSSPure CSS Accordion Sidebar for Admin Dashboards
View the full collection →

Search CodeFronts

Loading…

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