10 CSS Sidebar Navigation Designs07 / 10

Pure CSSMIT licensed

Fixed Full-Height CSS Sidebar Navigation Layout

A sticky vertical menu layout where the CSS sidebar stays pinned and the main content scrolls independently — a Strata-style documentation-site rail. The rail is position: fixed full-height with a search box, nested doc tree, version badge, and social icons, plus a sticky breadcrumb topbar on the article. Clean indigo-on-white docs aesthetic with Bricolage Grotesque headings. Collapses to an icon strip on mobile. Best for documentation sites, API references, technical handbooks, knowledge bases.

Published

Live Demo
Try it

The code

<section class="sn-fix" aria-label="Fixed full-height docs sidebar demo">
  <aside class="sidebar" aria-label="Documentation navigation">
    <div class="brand">
      <div class="logo" aria-hidden="true">⌘</div>
      <div><b>Strata</b><small>Documentation</small></div>
      <span class="ver">v4.0</span>
    </div>
    <div class="search" role="search">
      <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>Search docs…</span><kbd>⌘K</kbd>
    </div>
    <nav class="nav">
      <div class="cap">Getting Started</div>
      <a class="item" href="#">Introduction</a>
      <a class="item" href="#">Installation</a>
      <a class="item active" href="#">Quick Start</a>
      <div class="cap">Core Concepts</div>
      <a class="item" href="#">Architecture</a>
      <div class="sub">
        <a class="item" href="#">Routing</a>
        <a class="item active" href="#">Data Fetching</a>
        <a class="item" href="#">Caching</a>
      </div>
      <a class="item" href="#">Configuration</a>
      <a class="item" href="#">Middleware</a>
      <div class="cap">API Reference</div>
      <a class="item" href="#">CLI Commands</a>
      <a class="item" href="#">REST Endpoints</a>
      <a class="item" href="#">Webhooks</a>
    </nav>
    <div class="foot">
      <a href="#" title="GitHub" aria-label="GitHub"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.5 2 2 6.6 2 12.3c0 4.5 2.9 8.3 6.8 9.7.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.4-3.4-1.4-.4-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.6 2.4 1.1 3 .8.1-.7.3-1.1.6-1.4-2.2-.3-4.6-1.1-4.6-5 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.7 1a9.4 9.4 0 015 0c1.9-1.3 2.7-1 2.7-1 .5 1.4.2 2.4.1 2.7.6.7 1 1.6 1 2.7 0 3.9-2.3 4.7-4.6 5 .4.3.7.9.7 1.9v2.8c0 .3.2.6.7.5 4-1.4 6.8-5.2 6.8-9.7C22 6.6 17.5 2 12 2z"/></svg></a>
      <a href="#" title="Discord" aria-label="Discord"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M18 5a18 18 0 00-4-1l-.3.6a14 14 0 014 2c-2-1-4-1.6-5.7-1.6S8.3 5.6 6.3 6.6a14 14 0 014-2L10 4a18 18 0 00-4 1C3.5 8 3 11 3 14a13 13 0 004 2l.8-1.3"/><circle cx="9" cy="13" r="1"/><circle cx="15" cy="13" r="1"/></svg></a>
    </div>
  </aside>
  <main class="contentpane">
    <div class="topbar">Docs <b>/</b> Core Concepts <b>/</b> Data Fetching</div>
    <article class="doc">
      <div class="eyebrow">Core Concepts</div>
      <h1>Data Fetching</h1>
      <p>This layout uses a fixed full-height sidebar — the documentation tree stays pinned to the viewport while the article scrolls independently, the hallmark of a docs-style navigation.</p>
      <h2>Basic Usage</h2>
      <p>Fetch data on the server and stream it to the client. The sidebar remains accessible no matter how far down the page you read.</p>
      <div class="codeblock"><span class="c">// fetch on the server</span><br>const data = await strata.get('/api/posts');<br>return &lt;List items={data} /&gt;;</div>
    </article>
  </main>
</section>
/* ─── 07 Fixed Full-Height Sidebar — docs style ───────────── */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Inter+Tight:wght@400;500;600&display=swap');

.sn-fix {
  --sn-fix-bg: #fbfbfd;
  --sn-fix-rail: #ffffff;
  --sn-fix-ink: #15171c;
  --sn-fix-muted: #6b7280;
  --sn-fix-line: #ebedf2;
  --sn-fix-accent: #4338ca;
  --sn-fix-accent-soft: #eef0ff;
  --sn-fix-code: #0b0d12;
  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'Inter Tight', sans-serif;
  background: var(--sn-fix-bg);
  color: var(--sn-fix-ink);
  overflow: hidden;
  box-sizing: border-box;
}

.sn-fix *,
.sn-fix *::before,
.sn-fix *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sn-fix .sidebar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  background: var(--sn-fix-rail);
  border-right: 1px solid var(--sn-fix-line);
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.sn-fix .brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1.4rem 1.5rem;
  border-bottom: 1px solid var(--sn-fix-line);
}

.sn-fix .logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--sn-fix-ink);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-family: 'Bricolage Grotesque';
  flex-shrink: 0;
}

.sn-fix .brand b {
  font-family: 'Bricolage Grotesque';
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.03em;
}

.sn-fix .brand small {
  display: block;
  color: var(--sn-fix-muted);
  font-size: .7rem;
}

.sn-fix .ver {
  margin-left: auto;
  font-size: .66rem;
  font-weight: 600;
  color: var(--sn-fix-accent);
  background: var(--sn-fix-accent-soft);
  padding: .2rem .5rem;
  border-radius: 20px;
}

.sn-fix .search {
  margin: 1rem 1.2rem .4rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid var(--sn-fix-line);
  border-radius: 10px;
  padding: .55rem .75rem;
  color: var(--sn-fix-muted);
}

.sn-fix .search svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sn-fix .search span {
  font-size: .82rem;
  flex: 1;
}

.sn-fix .search kbd {
  font-size: .68rem;
  border: 1px solid var(--sn-fix-line);
  border-radius: 5px;
  padding: .05rem .35rem;
  background: var(--sn-fix-bg);
  font-family: inherit;
}

.sn-fix .nav {
  flex: 1;
  overflow-y: auto;
  padding: .7rem 1rem 1.5rem;
}

.sn-fix .cap {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sn-fix-muted);
  font-weight: 700;
  padding: 1rem .7rem .3rem;
}

.sn-fix .item {
  display: block;
  padding: .46rem .8rem;
  color: var(--sn-fix-muted);
  text-decoration: none;
  font-size: .88rem;
  border-radius: 8px;
  font-weight: 500;
  transition: .15s;
  border-left: 2px solid transparent;
}

.sn-fix .item:hover {
  color: var(--sn-fix-ink);
  background: var(--sn-fix-bg);
}

.sn-fix .item.active {
  color: var(--sn-fix-accent);
  background: var(--sn-fix-accent-soft);
  font-weight: 600;
}

.sn-fix .sub {
  margin-left: .55rem;
  border-left: 1px solid var(--sn-fix-line);
  padding-left: .4rem;
}

.sn-fix .sub .item {
  font-size: .84rem;
}

.sn-fix .sub .item.active {
  border-left: 2px solid var(--sn-fix-accent);
  border-radius: 0 8px 8px 0;
  background: transparent;
}

.sn-fix .foot {
  padding: 1rem 1.3rem;
  border-top: 1px solid var(--sn-fix-line);
  display: flex;
  gap: .8rem;
  color: var(--sn-fix-muted);
}

.sn-fix .foot a {
  color: var(--sn-fix-muted);
  display: grid;
  place-items: center;
}

.sn-fix .foot svg {
  width: 18px;
  height: 18px;
}

.sn-fix .contentpane {
  margin-left: 280px;
  height: 100%;
  overflow-y: auto;
}

.sn-fix .topbar {
  position: sticky;
  top: 0;
  background: rgba(251,251,253,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sn-fix-line);
  padding: .9rem 3rem;
  font-size: .82rem;
  color: var(--sn-fix-muted);
  z-index: 10;
}

.sn-fix .topbar b {
  color: var(--sn-fix-ink);
}

.sn-fix .doc {
  padding: 2.4rem 3rem;
  max-width: 760px;
}

.sn-fix .doc .eyebrow {
  font-size: .78rem;
  font-weight: 700;
  color: var(--sn-fix-accent);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sn-fix .doc h1 {
  font-family: 'Bricolage Grotesque';
  font-weight: 800;
  font-size: 2.6rem;
  letter-spacing: -.04em;
  margin: .4rem 0 1rem;
}

.sn-fix .doc p {
  color: #3c4150;
  line-height: 1.8;
  margin-bottom: 1.2rem;
  font-size: 1.02rem;
}

.sn-fix .doc h2 {
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: 1.4rem;
  margin: 2rem 0 .8rem;
}

.sn-fix .codeblock {
  background: var(--sn-fix-code);
  color: #a5b4fc;
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .85rem;
  line-height: 1.7;
  overflow-x: auto;
}

.sn-fix .codeblock .c {
  color: #5b6270;
}

@media (max-width: 820px) {
  .sn-fix .sidebar {
    width: 72px;
  }

  .sn-fix .brand b,
    .sn-fix .brand small,
    .sn-fix .ver,
    .sn-fix .search span,
    .sn-fix .search kbd,
    .sn-fix .cap,
    .sn-fix .sub,
    .sn-fix .nav .item:not(.icon) {
    display: none;
  }

  .sn-fix .brand,
    .sn-fix .search {
    justify-content: center;
  }

  .sn-fix .contentpane {
    margin-left: 72px;
  }

  .sn-fix .topbar,
    .sn-fix .doc {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Sidebar Navigation Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Fixed Full-Height CSS Sidebar Navigation Layout
Source: https://codefronts.com/navigation/css-sidebar-navigation/fixed-full-height-css-sidebar-navigation-layout/

A sticky vertical menu layout where the CSS sidebar stays pinned and the main content scrolls independently — a Strata-style documentation-site rail. The rail is position: fixed full-height with a search box, nested doc tree, version badge, and social icons, plus a sticky breadcrumb topbar on the article. Clean indigo-on-white docs aesthetic with Bricolage Grotesque headings. Collapses to an icon strip on mobile. Best for documentation sites, API references, technical handbooks, knowledge bases.
## HTML
```html
<section class="sn-fix" aria-label="Fixed full-height docs sidebar demo">
  <aside class="sidebar" aria-label="Documentation navigation">
    <div class="brand">
      <div class="logo" aria-hidden="true">⌘</div>
      <div><b>Strata</b><small>Documentation</small></div>
      <span class="ver">v4.0</span>
    </div>
    <div class="search" role="search">
      <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>Search docs…</span><kbd>⌘K</kbd>
    </div>
    <nav class="nav">
      <div class="cap">Getting Started</div>
      <a class="item" href="#">Introduction</a>
      <a class="item" href="#">Installation</a>
      <a class="item active" href="#">Quick Start</a>
      <div class="cap">Core Concepts</div>
      <a class="item" href="#">Architecture</a>
      <div class="sub">
        <a class="item" href="#">Routing</a>
        <a class="item active" href="#">Data Fetching</a>
        <a class="item" href="#">Caching</a>
      </div>
      <a class="item" href="#">Configuration</a>
      <a class="item" href="#">Middleware</a>
      <div class="cap">API Reference</div>
      <a class="item" href="#">CLI Commands</a>
      <a class="item" href="#">REST Endpoints</a>
      <a class="item" href="#">Webhooks</a>
    </nav>
    <div class="foot">
      <a href="#" title="GitHub" aria-label="GitHub"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.5 2 2 6.6 2 12.3c0 4.5 2.9 8.3 6.8 9.7.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.4-3.4-1.4-.4-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.6 2.4 1.1 3 .8.1-.7.3-1.1.6-1.4-2.2-.3-4.6-1.1-4.6-5 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.7 1a9.4 9.4 0 015 0c1.9-1.3 2.7-1 2.7-1 .5 1.4.2 2.4.1 2.7.6.7 1 1.6 1 2.7 0 3.9-2.3 4.7-4.6 5 .4.3.7.9.7 1.9v2.8c0 .3.2.6.7.5 4-1.4 6.8-5.2 6.8-9.7C22 6.6 17.5 2 12 2z"/></svg></a>
      <a href="#" title="Discord" aria-label="Discord"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M18 5a18 18 0 00-4-1l-.3.6a14 14 0 014 2c-2-1-4-1.6-5.7-1.6S8.3 5.6 6.3 6.6a14 14 0 014-2L10 4a18 18 0 00-4 1C3.5 8 3 11 3 14a13 13 0 004 2l.8-1.3"/><circle cx="9" cy="13" r="1"/><circle cx="15" cy="13" r="1"/></svg></a>
    </div>
  </aside>
  <main class="contentpane">
    <div class="topbar">Docs <b>/</b> Core Concepts <b>/</b> Data Fetching</div>
    <article class="doc">
      <div class="eyebrow">Core Concepts</div>
      <h1>Data Fetching</h1>
      <p>This layout uses a fixed full-height sidebar — the documentation tree stays pinned to the viewport while the article scrolls independently, the hallmark of a docs-style navigation.</p>
      <h2>Basic Usage</h2>
      <p>Fetch data on the server and stream it to the client. The sidebar remains accessible no matter how far down the page you read.</p>
      <div class="codeblock"><span class="c">// fetch on the server</span><br>const data = await strata.get('/api/posts');<br>return &lt;List items={data} /&gt;;</div>
    </article>
  </main>
</section>
```
## CSS
```css
/* ─── 07 Fixed Full-Height Sidebar — docs style ───────────── */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Inter+Tight:wght@400;500;600&display=swap');

.sn-fix {
  --sn-fix-bg: #fbfbfd;
  --sn-fix-rail: #ffffff;
  --sn-fix-ink: #15171c;
  --sn-fix-muted: #6b7280;
  --sn-fix-line: #ebedf2;
  --sn-fix-accent: #4338ca;
  --sn-fix-accent-soft: #eef0ff;
  --sn-fix-code: #0b0d12;
  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'Inter Tight', sans-serif;
  background: var(--sn-fix-bg);
  color: var(--sn-fix-ink);
  overflow: hidden;
  box-sizing: border-box;
}

.sn-fix *,
.sn-fix *::before,
.sn-fix *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sn-fix .sidebar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  background: var(--sn-fix-rail);
  border-right: 1px solid var(--sn-fix-line);
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.sn-fix .brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1.4rem 1.5rem;
  border-bottom: 1px solid var(--sn-fix-line);
}

.sn-fix .logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--sn-fix-ink);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-family: 'Bricolage Grotesque';
  flex-shrink: 0;
}

.sn-fix .brand b {
  font-family: 'Bricolage Grotesque';
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.03em;
}

.sn-fix .brand small {
  display: block;
  color: var(--sn-fix-muted);
  font-size: .7rem;
}

.sn-fix .ver {
  margin-left: auto;
  font-size: .66rem;
  font-weight: 600;
  color: var(--sn-fix-accent);
  background: var(--sn-fix-accent-soft);
  padding: .2rem .5rem;
  border-radius: 20px;
}

.sn-fix .search {
  margin: 1rem 1.2rem .4rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid var(--sn-fix-line);
  border-radius: 10px;
  padding: .55rem .75rem;
  color: var(--sn-fix-muted);
}

.sn-fix .search svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sn-fix .search span {
  font-size: .82rem;
  flex: 1;
}

.sn-fix .search kbd {
  font-size: .68rem;
  border: 1px solid var(--sn-fix-line);
  border-radius: 5px;
  padding: .05rem .35rem;
  background: var(--sn-fix-bg);
  font-family: inherit;
}

.sn-fix .nav {
  flex: 1;
  overflow-y: auto;
  padding: .7rem 1rem 1.5rem;
}

.sn-fix .cap {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sn-fix-muted);
  font-weight: 700;
  padding: 1rem .7rem .3rem;
}

.sn-fix .item {
  display: block;
  padding: .46rem .8rem;
  color: var(--sn-fix-muted);
  text-decoration: none;
  font-size: .88rem;
  border-radius: 8px;
  font-weight: 500;
  transition: .15s;
  border-left: 2px solid transparent;
}

.sn-fix .item:hover {
  color: var(--sn-fix-ink);
  background: var(--sn-fix-bg);
}

.sn-fix .item.active {
  color: var(--sn-fix-accent);
  background: var(--sn-fix-accent-soft);
  font-weight: 600;
}

.sn-fix .sub {
  margin-left: .55rem;
  border-left: 1px solid var(--sn-fix-line);
  padding-left: .4rem;
}

.sn-fix .sub .item {
  font-size: .84rem;
}

.sn-fix .sub .item.active {
  border-left: 2px solid var(--sn-fix-accent);
  border-radius: 0 8px 8px 0;
  background: transparent;
}

.sn-fix .foot {
  padding: 1rem 1.3rem;
  border-top: 1px solid var(--sn-fix-line);
  display: flex;
  gap: .8rem;
  color: var(--sn-fix-muted);
}

.sn-fix .foot a {
  color: var(--sn-fix-muted);
  display: grid;
  place-items: center;
}

.sn-fix .foot svg {
  width: 18px;
  height: 18px;
}

.sn-fix .contentpane {
  margin-left: 280px;
  height: 100%;
  overflow-y: auto;
}

.sn-fix .topbar {
  position: sticky;
  top: 0;
  background: rgba(251,251,253,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sn-fix-line);
  padding: .9rem 3rem;
  font-size: .82rem;
  color: var(--sn-fix-muted);
  z-index: 10;
}

.sn-fix .topbar b {
  color: var(--sn-fix-ink);
}

.sn-fix .doc {
  padding: 2.4rem 3rem;
  max-width: 760px;
}

.sn-fix .doc .eyebrow {
  font-size: .78rem;
  font-weight: 700;
  color: var(--sn-fix-accent);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sn-fix .doc h1 {
  font-family: 'Bricolage Grotesque';
  font-weight: 800;
  font-size: 2.6rem;
  letter-spacing: -.04em;
  margin: .4rem 0 1rem;
}

.sn-fix .doc p {
  color: #3c4150;
  line-height: 1.8;
  margin-bottom: 1.2rem;
  font-size: 1.02rem;
}

.sn-fix .doc h2 {
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: 1.4rem;
  margin: 2rem 0 .8rem;
}

.sn-fix .codeblock {
  background: var(--sn-fix-code);
  color: #a5b4fc;
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .85rem;
  line-height: 1.7;
  overflow-x: auto;
}

.sn-fix .codeblock .c {
  color: #5b6270;
}

@media (max-width: 820px) {
  .sn-fix .sidebar {
    width: 72px;
  }

  .sn-fix .brand b,
    .sn-fix .brand small,
    .sn-fix .ver,
    .sn-fix .search span,
    .sn-fix .search kbd,
    .sn-fix .cap,
    .sn-fix .sub,
    .sn-fix .nav .item:not(.icon) {
    display: none;
  }

  .sn-fix .brand,
    .sn-fix .search {
    justify-content: center;
  }

  .sn-fix .contentpane {
    margin-left: 72px;
  }

  .sn-fix .topbar,
    .sn-fix .doc {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
}
```

Techniques used in this demo

backdrop-filterMDN ↗role="" (ARIA)MDN ↗place-items / place-contentMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →