Back to CSS Sidebar Layouts Mini Icon Rail Pure CSS
Share 
.sb-mini {
  position: relative;
  display: grid; grid-template-columns: 64px 1fr;
  min-height: 480px;
  font-family: 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  background: #0a0014; color: #f7f4ff;
  border-radius: 14px; overflow: hidden;
  isolation: isolate;
}
.sb-mini-grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,0,228,0.12) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(0,229,255,0.1) 1px, transparent 1px) 0 0 / 28px 100%,
    radial-gradient(60% 40% at 80% 20%, rgba(255,0,228,0.22), transparent 70%),
    radial-gradient(60% 40% at 20% 80%, rgba(0,229,255,0.22), transparent 70%),
    #0a0014;
  z-index: 0;
}
.sb-mini-rail {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, rgba(20,5,40,0.92) 0%, rgba(8,0,20,0.96) 100%);
  border-right: 1px solid rgba(255,0,228,0.4);
  box-shadow: 1px 0 24px rgba(255,0,228,0.25), inset -1px 0 0 rgba(255,0,228,0.5);
  padding: 14px 0; display: flex; flex-direction: column; gap: 12px;
  width: 64px; overflow: hidden;
  transition: width 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.sb-mini-rail:hover, .sb-mini-rail:focus-within { width: 240px; }
.sb-mini-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px; height: 40px;
  text-decoration: none; flex-shrink: 0;
  white-space: nowrap;
}
.sb-mini-mark {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff00e4 0%, #ffd400 100%);
  color: #0a0014; font-family: 'Courier New', monospace; font-size: 18px; font-weight: 900;
  box-shadow: 0 0 0 1px rgba(255,212,0,0.5), 0 0 20px rgba(255,0,228,0.6);
}
.sb-mini-brand-name { font-family: 'Courier New', monospace; font-size: 16px; font-weight: 800; letter-spacing: 0.08em; color: #ffd400; text-shadow: 0 0 8px rgba(255,212,0,0.6); }
.sb-mini-brand-name small { display: block; font-size: 9px; letter-spacing: 0.4em; color: #ff00e4; margin-top: -2px; font-weight: 600; }
.sb-mini-rail ul { list-style: none; margin: 0; padding: 4px 8px; display: flex; flex-direction: column; gap: 4px; }
.sb-mini-rail a {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px; border-radius: 8px;
  font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; color: #d4c5e8; text-decoration: none;
  white-space: nowrap; overflow: hidden;
  border: 1px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.sb-mini-rail a:hover, .sb-mini-rail a:focus-visible {
  background: rgba(255,0,228,0.1);
  border-color: rgba(255,0,228,0.45);
  color: #fff;
  box-shadow: 0 0 16px rgba(255,0,228,0.35), inset 0 0 16px rgba(255,0,228,0.1);
}
.sb-mini-rail a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(255,212,0,0.18), rgba(255,0,228,0.18));
  border-color: #ffd400;
  color: #fff;
  box-shadow: 0 0 24px rgba(255,212,0,0.45), inset 0 0 12px rgba(255,212,0,0.15);
}
.sb-mini-rail a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: #ffd400; border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px #ffd400, 0 0 24px rgba(255,212,0,0.6);
}
.sb-mini-ico { width: 20px; flex-shrink: 0; text-align: center; font-size: 14px; }
.sb-mini-rail li:nth-child(1) .sb-mini-ico { color: #ffd400; text-shadow: 0 0 8px #ffd400; }
.sb-mini-rail li:nth-child(2) .sb-mini-ico { color: #00e5ff; text-shadow: 0 0 8px #00e5ff; }
.sb-mini-rail li:nth-child(3) .sb-mini-ico { color: #ff00e4; text-shadow: 0 0 8px #ff00e4; }
.sb-mini-rail li:nth-child(4) .sb-mini-ico { color: #c2ff00; text-shadow: 0 0 8px #c2ff00; }
.sb-mini-rail li:nth-child(5) .sb-mini-ico { color: #ff8a00; text-shadow: 0 0 8px #ff8a00; }
.sb-mini-rail li:nth-child(6) .sb-mini-ico { color: #00ffa3; text-shadow: 0 0 8px #00ffa3; }
.sb-mini-lbl { opacity: 0; transition: opacity 0.22s ease; }
.sb-mini-rail:hover .sb-mini-lbl, .sb-mini-rail:focus-within .sb-mini-lbl { opacity: 1; }
.sb-mini-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid rgba(255,0,228,0.25); white-space: nowrap; overflow: hidden; }
.sb-mini-pulse { width: 8px; height: 8px; border-radius: 50%; background: #c2ff00; flex-shrink: 0; box-shadow: 0 0 10px #c2ff00, 0 0 20px rgba(194,255,0,0.5); animation: sb-mini-pulse 1.4s ease-in-out infinite; }
@keyframes sb-mini-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } }
.sb-mini-foot-lbl { font-family: 'Courier New', monospace; font-size: 11px; color: #c2ff00; letter-spacing: 0.06em; opacity: 0; transition: opacity 0.22s ease; }
.sb-mini-rail:hover .sb-mini-foot-lbl, .sb-mini-rail:focus-within .sb-mini-foot-lbl { opacity: 1; }
.sb-mini-main { position: relative; z-index: 1; padding: 30px 32px; display: flex; flex-direction: column; gap: 14px; }
.sb-mini-eye { font-family: 'Courier New', monospace; font-size: 11px; letter-spacing: 0.18em; color: #c2ff00; text-shadow: 0 0 8px rgba(194,255,0,0.5); }
.sb-mini-main h2 {
  margin: 0; font-size: clamp(28px, 5vw, 56px); font-weight: 900; line-height: 0.95;
  background: linear-gradient(135deg, #ffd400 0%, #ff00e4 50%, #00e5ff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -0.03em;
  filter: drop-shadow(0 0 20px rgba(255,0,228,0.4));
}
.sb-mini-main p { margin: 0; font-size: 13px; color: #d4c5e8; line-height: 1.6; max-width: 440px; }
.sb-mini-main code { font-family: 'Courier New', monospace; font-size: 12px; color: #ffd400; background: rgba(255,212,0,0.1); padding: 1px 5px; border-radius: 3px; border: 1px solid rgba(255,212,0,0.25); }
.sb-mini-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.sb-mini-tags span { font-family: 'Courier New', monospace; font-size: 10.5px; padding: 4px 10px; border-radius: 11px; border: 1px solid rgba(0,229,255,0.4); color: #00e5ff; background: rgba(0,229,255,0.06); letter-spacing: 0.06em; }
@media (prefers-reduced-motion: reduce) {
  .sb-mini-rail, .sb-mini-lbl, .sb-mini-foot-lbl, .sb-mini-pulse { transition: none; animation: none; }
}
<div class="sb-mini">
  <div class="sb-mini-grid" aria-hidden="true"></div>
  <aside class="sb-mini-rail" aria-label="Primary">
    <a class="sb-mini-brand" href="#!" aria-label="Neon home">
      <span class="sb-mini-mark" aria-hidden="true">N</span>
      <span class="sb-mini-brand-name">NEON<small>1989</small></span>
    </a>
    <nav aria-label="Primary">
      <ul>
        <li><a href="#!" aria-label="Arcade" aria-current="page" data-key="01"><span class="sb-mini-ico" aria-hidden="true">◆</span><span class="sb-mini-lbl">Arcade</span></a></li>
        <li><a href="#!" aria-label="Library"   data-key="02"><span class="sb-mini-ico" aria-hidden="true">▤</span><span class="sb-mini-lbl">Library</span></a></li>
        <li><a href="#!" aria-label="Squad"     data-key="03"><span class="sb-mini-ico" aria-hidden="true">◑</span><span class="sb-mini-lbl">Squad</span></a></li>
        <li><a href="#!" aria-label="Trophies"  data-key="04"><span class="sb-mini-ico" aria-hidden="true">★</span><span class="sb-mini-lbl">Trophies</span></a></li>
        <li><a href="#!" aria-label="Store"     data-key="05"><span class="sb-mini-ico" aria-hidden="true">◊</span><span class="sb-mini-lbl">Store</span></a></li>
        <li><a href="#!" aria-label="Settings"  data-key="06"><span class="sb-mini-ico" aria-hidden="true">⚙</span><span class="sb-mini-lbl">Settings</span></a></li>
      </ul>
    </nav>
    <footer class="sb-mini-foot">
      <span class="sb-mini-pulse" aria-hidden="true"></span>
      <span class="sb-mini-foot-lbl">Online · 24,891</span>
    </footer>
  </aside>
  <main class="sb-mini-main">
    <span class="sb-mini-eye">▸ NOW PLAYING · LEVEL 47</span>
    <h2>Hover<br/>the rail →</h2>
    <p>Hover or focus to expand the rail. Each icon glows in its own neon colour — magenta, yellow, cyan, lime — like a Shibuya arcade marquee at midnight.</p>
    <div class="sb-mini-tags">
      <span>#tokyo</span><span>#midnight</span><span>#arcade</span><span>#neon</span>
    </div>
  </main>
</div>
Live preview Edit any tab — preview updates live Ready