Back to CSS Sidebar Layouts Search-top Sidebar Pure CSS
Share 
.sb-srh {
  position: relative;
  display: grid; grid-template-columns: 250px 1fr;
  min-height: 480px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  color: #1a1a1f;
  border-radius: 14px; overflow: hidden;
  isolation: isolate;
  letter-spacing: -0.01em;
}
.sb-srh-wall {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 50% at 30% 20%, #ffd1a8 0%, transparent 60%),
    radial-gradient(60% 60% at 80% 70%, #ffb6d4 0%, transparent 60%),
    linear-gradient(180deg, #fff5e8 0%, #ffe8f0 50%, #d8e9ff 100%);
}
.sb-srh-side {
  position: relative; z-index: 1;
  background: rgba(245,245,250,0.72);
  backdrop-filter: blur(40px) saturate(1.6); -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border-right: 1px solid rgba(0,0,0,0.08);
  display: flex; flex-direction: column;
  max-height: 480px; overflow-y: auto;
}
.sb-srh-traffic { display: flex; gap: 7px; padding: 12px 14px 0; }
.sb-srh-traffic i { display: block; width: 11px; height: 11px; border-radius: 50%; }
.sb-srh-traffic i:nth-child(1) { background: #ff5f57; }
.sb-srh-traffic i:nth-child(2) { background: #febc2e; }
.sb-srh-traffic i:nth-child(3) { background: #28c840; }
.sb-srh-form {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  background: rgba(245,245,250,0.85);
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.sb-srh-icon { color: #6e6e73; font-size: 13px; }
.sb-srh-form input {
  flex: 1; min-width: 0;
  padding: 6px 10px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 7px;
  color: #1a1a1f; font-size: 13px;
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.sb-srh-form input:focus { outline: 3px solid rgba(0,122,255,0.4); outline-offset: -1px; border-color: rgba(0,122,255,0.6); }
.sb-srh-form kbd {
  font-family: -apple-system, sans-serif; font-size: 10.5px; font-weight: 600;
  padding: 2px 6px;
  background: rgba(255,255,255,0.7);
  color: #6e6e73;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 4px;
}
.sb-srh-side nav { padding: 14px 10px 18px; }
.sb-srh-side h3 { margin: 14px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: #6e6e73; }
.sb-srh-side h3:first-of-type { margin-top: 4px; }
.sb-srh-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-srh-side a {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 6px;
  font-size: 13px; font-weight: 500; color: #1a1a1f;
  text-decoration: none;
  transition: background 0.14s, color 0.14s;
}
.sb-srh-side a:hover { background: rgba(0,0,0,0.05); }
.sb-srh-side a[aria-current="page"] { background: #007aff; color: #fff; font-weight: 600; }
.sb-srh-side a[aria-current="page"] em { color: rgba(255,255,255,0.85); }
.sb-srh-i { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 4px; flex-shrink: 0; font-size: 7.5px; color: transparent; line-height: 0; }
.sb-srh-side a em { margin-left: auto; font-style: normal; font-size: 11px; color: #6e6e73; font-weight: 600; }
.sb-srh-main { position: relative; z-index: 1; padding: 32px 36px; background: rgba(255,255,255,0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 16px; }
.sb-srh-mhead { display: flex; align-items: baseline; justify-content: space-between; }
.sb-srh-main h2 { margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: 700; color: #1a1a1f; letter-spacing: -0.03em; }
.sb-srh-meta { font-size: 12px; color: #6e6e73; }
.sb-srh-main p { margin: 0; font-size: 13.5px; color: #3a3a3f; line-height: 1.6; max-width: 480px; }
.sb-srh-main code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #007aff; background: rgba(0,122,255,0.1); padding: 1px 6px; border-radius: 4px; }
.sb-srh-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sb-srh-card {
  display: grid; grid-template-columns: 10px 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 4px 16px rgba(0,0,0,0.04);
  transition: transform 0.14s, box-shadow 0.14s;
}
.sb-srh-card:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 8px 24px rgba(0,0,0,0.08); }
.sb-srh-card-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sb-srh-card strong { font-size: 13.5px; font-weight: 700; color: #1a1a1f; }
.sb-srh-card em { font-style: normal; font-size: 12.5px; color: #6e6e73; grid-column: 2; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 720px) {
  .sb-srh { grid-template-columns: 1fr; }
  .sb-srh-side { max-height: none; border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
}
<div class="sb-srh">
  <span class="sb-srh-wall" aria-hidden="true"></span>
  <aside class="sb-srh-side" aria-label="Primary">
    <header class="sb-srh-traffic" aria-hidden="true"><i></i><i></i><i></i></header>
    <form class="sb-srh-form" role="search">
      <label class="sr-only" for="sb-srh-q">Search docs</label>
      <span class="sb-srh-icon" aria-hidden="true">⌕</span>
      <input id="sb-srh-q" type="search" name="q" placeholder="Search…" autocomplete="off" />
      <kbd>⌘K</kbd>
    </form>
    <nav aria-label="Primary">
      <h3>Favourites</h3>
      <ul>
        <li><a href="#!" aria-current="page"><span class="sb-srh-i" style="background:#34c759">●</span>Inbox<em>12</em></a></li>
        <li><a href="#!"><span class="sb-srh-i" style="background:#ff9500">●</span>Drafts<em>3</em></a></li>
        <li><a href="#!"><span class="sb-srh-i" style="background:#5ac8fa">●</span>Sent</a></li>
      </ul>
      <h3>iCloud</h3>
      <ul>
        <li><a href="#!"><span class="sb-srh-i" aria-hidden="true">▤</span>Documents</a></li>
        <li><a href="#!"><span class="sb-srh-i" aria-hidden="true">◇</span>Desktop</a></li>
        <li><a href="#!"><span class="sb-srh-i" aria-hidden="true">⇩</span>Downloads</a></li>
      </ul>
      <h3>Tags</h3>
      <ul>
        <li><a href="#!"><span class="sb-srh-i" style="background:#ff3b30">●</span>Important</a></li>
        <li><a href="#!"><span class="sb-srh-i" style="background:#af52de">●</span>Personal</a></li>
        <li><a href="#!"><span class="sb-srh-i" style="background:#ffcc00">●</span>Travel</a></li>
      </ul>
    </nav>
  </aside>
  <main class="sb-srh-main">
    <header class="sb-srh-mhead">
      <h2>Inbox</h2>
      <span class="sb-srh-meta">Updated just now · 12 unread</span>
    </header>
    <p>The search bar at the top stays sticky as the nav scrolls. Real <code>&lt;input type="search"&gt;</code> gives a native clear button. Vibrancy blur is pure CSS via <code>backdrop-filter</code>.</p>
    <div class="sb-srh-cards">
      <article class="sb-srh-card">
        <span class="sb-srh-card-dot" style="background:#34c759"></span>
        <strong>Anya Petrova</strong>
        <em>Re: Q3 launch deck</em>
      </article>
      <article class="sb-srh-card">
        <span class="sb-srh-card-dot" style="background:#5ac8fa"></span>
        <strong>Daichi Sato</strong>
        <em>Friday demo recap</em>
      </article>
    </div>
  </main>
</div>
Live preview Edit any tab — preview updates live Ready