10 CSS Sidebar Navigation 07 / 10
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.
Best fordocumentation sites, API references, technical handbooks, knowledge bases.
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 <List items={data} />;</div>
</article>
</main>
</section> <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 <List items={data} />;</div>
</article>
</main>
</section>/* ─── 07 Fixed Full-Height Sidebar — docs style ───────────── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],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; }
} /* ─── 07 Fixed Full-Height Sidebar — docs style ───────────── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],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; }
}More from 10 CSS Sidebar Navigation
Modern 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 CSSLight & Flexible CSS Vertical Rail Menu (Collapsible)Responsive Dashboard Sidebar Navigation with SubmenusMulti-Level Vertical Sidebar Menu Template in HTML/CSSPure CSS Accordion Sidebar for Admin Dashboards
View the full collection →