30 CSS Sidebar Layouts22 / 30

Pure CSSMIT licensed

Section-Grouped Sidebar Navigation Menu with Header Labels

How large admin tools stay navigable: links organized under quiet uppercase group labels — the typographic system (size, tracking, color, spacing rhythm) that makes 25 links scan like 5 groups. The groups are semantic lists with real headings, so screen reader users get the same wayfinding the type provides visually.

Published Updated

Live Demo
Try it

The code

<section class="sbl-22">
  <aside class="sbl-22__rail" aria-label="Admin">
    <div class="sbl-22__brand"><span aria-hidden="true"></span>Control Plane</div>
    <section class="sbl-22__grp" aria-labelledby="sbl22-g1">
      <h2 id="sbl22-g1">Provisioning</h2>
      <ul><li><a href="#" aria-current="page">Clusters <span>8</span></a></li><li><a href="#">Node pools</a></li><li><a href="#">Volumes <span>42</span></a></li><li><a href="#">Snapshots</a></li></ul>
    </section>
    <section class="sbl-22__grp" aria-labelledby="sbl22-g2">
      <h2 id="sbl22-g2">Networking</h2>
      <ul><li><a href="#">Load balancers</a></li><li><a href="#">Firewalls <span>3</span></a></li><li><a href="#">DNS zones</a></li></ul>
    </section>
    <section class="sbl-22__grp" aria-labelledby="sbl22-g3">
      <h2 id="sbl22-g3">Access</h2>
      <ul><li><a href="#">Team members</a></li><li><a href="#">API tokens</a></li><li><a href="#">Audit log</a></li></ul>
    </section>
  </aside>
  <main class="sbl-22__main"><h1>Clusters</h1><p>No divider lines anywhere — the 22px-to-2px spacing rhythm and the label typography do all the grouping.</p></main>
</section>
.sbl-22,
.sbl-22 *,
.sbl-22 *::before,
.sbl-22 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sbl-22 {
  --panel: oklch(0.965 0.005 230);
  --ink: oklch(0.26 0.02 230);
  --mut: oklch(0.5 0.015 230);
  --line: oklch(0.89 0.008 230);
  --accent: oklch(0.5 0.15 235);
  display: grid;
  grid-template-columns: 256px 1fr;
  height: 100vh;
  height: 100dvh;
  font-family: system-ui,'Segoe UI',sans-serif;
  background: oklch(0.99 0.002 230);
  color: var(--ink);
}

.sbl-22__rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 20px 14px;
  overflow-y: auto;
}

.sbl-22__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 15px/1 system-ui,sans-serif;
  padding: 2px 10px 6px;
}

.sbl-22__brand span {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: conic-gradient(from 80deg,var(--accent),oklch(0.62 0.13 190));
}

.sbl-22__grp {
  margin-block-start: 22px;
}

.sbl-22__grp h2 {
  font: 650 10.5px/1 system-ui,sans-serif;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: color-mix(in oklab,var(--mut) 85%,transparent);
  padding: 0 12px 7px;
}

.sbl-22__grp ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sbl-22__grp a {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 9px;
  font: 500 14px/1 system-ui,sans-serif;
  color: var(--mut);
  text-decoration: none;
  transition: background-color .15s ease,color .15s ease;
}

.sbl-22__grp a:hover {
  color: var(--ink);
  background: color-mix(in oklab,var(--ink) 5%,transparent);
}

.sbl-22__grp a[aria-current="page"] {
  color: var(--accent);
  background: color-mix(in oklab,var(--accent) 10%,transparent);
  font-weight: 600;
}

.sbl-22__grp a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.sbl-22__grp a span {
  margin-inline-start: auto;
  font: 600 11px/1 system-ui,sans-serif;
  color: var(--mut);
  background: color-mix(in oklab,var(--ink) 7%,transparent);
  border-radius: 999px;
  padding: 3px 8px;
}

.sbl-22__main {
  padding: 32px;
  overflow-y: auto;
}

.sbl-22__main h1 {
  font: 600 22px/1.2 system-ui,sans-serif;
  margin-bottom: 10px;
}

.sbl-22__main p {
  color: var(--mut);
  font-size: 14px;
  line-height: 1.6;
  max-width: 48ch;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .sbl-22__grp a {
    transition: none;
  }
}
/* No JavaScript — grouping is pure typography: 10.5px uppercase labels at 60% ink and a 22px:2px spacing rhythm; sections carry real headings for AT. */
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 Layout 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: Section-Grouped Sidebar Navigation Menu with Header Labels
Source: https://codefronts.com/layouts/css-sidebar-layouts/section-grouped-nav/

How large admin tools stay navigable: links organized under quiet uppercase group labels — the typographic system (size, tracking, color, spacing rhythm) that makes 25 links scan like 5 groups. The groups are semantic lists with real headings, so screen reader users get the same wayfinding the type provides visually.
## HTML
```html
<section class="sbl-22">
  <aside class="sbl-22__rail" aria-label="Admin">
    <div class="sbl-22__brand"><span aria-hidden="true"></span>Control Plane</div>
    <section class="sbl-22__grp" aria-labelledby="sbl22-g1">
      <h2 id="sbl22-g1">Provisioning</h2>
      <ul><li><a href="#" aria-current="page">Clusters <span>8</span></a></li><li><a href="#">Node pools</a></li><li><a href="#">Volumes <span>42</span></a></li><li><a href="#">Snapshots</a></li></ul>
    </section>
    <section class="sbl-22__grp" aria-labelledby="sbl22-g2">
      <h2 id="sbl22-g2">Networking</h2>
      <ul><li><a href="#">Load balancers</a></li><li><a href="#">Firewalls <span>3</span></a></li><li><a href="#">DNS zones</a></li></ul>
    </section>
    <section class="sbl-22__grp" aria-labelledby="sbl22-g3">
      <h2 id="sbl22-g3">Access</h2>
      <ul><li><a href="#">Team members</a></li><li><a href="#">API tokens</a></li><li><a href="#">Audit log</a></li></ul>
    </section>
  </aside>
  <main class="sbl-22__main"><h1>Clusters</h1><p>No divider lines anywhere — the 22px-to-2px spacing rhythm and the label typography do all the grouping.</p></main>
</section>
```
## CSS
```css
.sbl-22,
.sbl-22 *,
.sbl-22 *::before,
.sbl-22 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sbl-22 {
  --panel: oklch(0.965 0.005 230);
  --ink: oklch(0.26 0.02 230);
  --mut: oklch(0.5 0.015 230);
  --line: oklch(0.89 0.008 230);
  --accent: oklch(0.5 0.15 235);
  display: grid;
  grid-template-columns: 256px 1fr;
  height: 100vh;
  height: 100dvh;
  font-family: system-ui,'Segoe UI',sans-serif;
  background: oklch(0.99 0.002 230);
  color: var(--ink);
}

.sbl-22__rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 20px 14px;
  overflow-y: auto;
}

.sbl-22__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 15px/1 system-ui,sans-serif;
  padding: 2px 10px 6px;
}

.sbl-22__brand span {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: conic-gradient(from 80deg,var(--accent),oklch(0.62 0.13 190));
}

.sbl-22__grp {
  margin-block-start: 22px;
}

.sbl-22__grp h2 {
  font: 650 10.5px/1 system-ui,sans-serif;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: color-mix(in oklab,var(--mut) 85%,transparent);
  padding: 0 12px 7px;
}

.sbl-22__grp ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sbl-22__grp a {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 9px;
  font: 500 14px/1 system-ui,sans-serif;
  color: var(--mut);
  text-decoration: none;
  transition: background-color .15s ease,color .15s ease;
}

.sbl-22__grp a:hover {
  color: var(--ink);
  background: color-mix(in oklab,var(--ink) 5%,transparent);
}

.sbl-22__grp a[aria-current="page"] {
  color: var(--accent);
  background: color-mix(in oklab,var(--accent) 10%,transparent);
  font-weight: 600;
}

.sbl-22__grp a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.sbl-22__grp a span {
  margin-inline-start: auto;
  font: 600 11px/1 system-ui,sans-serif;
  color: var(--mut);
  background: color-mix(in oklab,var(--ink) 7%,transparent);
  border-radius: 999px;
  padding: 3px 8px;
}

.sbl-22__main {
  padding: 32px;
  overflow-y: auto;
}

.sbl-22__main h1 {
  font: 600 22px/1.2 system-ui,sans-serif;
  margin-bottom: 10px;
}

.sbl-22__main p {
  color: var(--mut);
  font-size: 14px;
  line-height: 1.6;
  max-width: 48ch;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .sbl-22__grp a {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — grouping is pure typography: 10.5px uppercase labels at 60% ink and a 22px:2px spacing rhythm; sections carry real headings for AT. */
```

How this works

The entire technique is typographic contrast. Group labels are 10.5px, uppercase, letter-spacing:.09em, at 60% ink — links are 14px, sentence case, full contrast on hover. That double contrast (size AND weight AND case AND color) is what lets the eye chunk the list without a single divider line or box. The spacing rhythm does the rest: margin-block-start:22px before each group versus 2px between links — a 10:1 ratio that visually binds links to their label. Get the ratio wrong (say 3:1) and grouping collapses; this is the demo to steal numbers from.

Semantics mirror the visuals: each group is a <section> whose label is a real heading associated via aria-labelledby, and links live in a <ul> — so a screen reader announces 'Provisioning, list, 4 items'. The count chips on the right edge are margin-inline-start:auto spans, and the whole rail composes directly with demo 21's sticky search or demo 17's pinned footer.

Make it yours

  • The spacing ratio (22px group gap : 2px link gap) is the design system token to extract — keep ≥8:1.
  • Collapsible groups: wrap each section's ul in demo 03's <details> with the label as summary.
  • On 25+ links add demo 21's sticky search above the first group — grouped nav and filtering compose.
  • Label color at 55–65% ink; darker steals attention from links, lighter fails contrast on hover-adjacent scanning.

Gotchas — read before shipping

  • Labels must NOT be links or buttons — decorative headings that navigate confuse both mouse muscle-memory and screen reader link lists.
  • Don't skip heading levels inside groups (the h2s here follow the rail's h-hierarchy) — jumped levels break rotor navigation.
  • Uppercase + tight tracking below 10px becomes unreadable for dyslexic users — 10.5px/.09em is the floor, not a suggestion.

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

Floor set by oklch(), color-mix(), text-wrap as this demo is written. The core technique itself goes back further — Chrome 57+.

Pure typography and flex — runs everywhere. The oklch palette is the only 2023+ syntax; swap for hex to go fully legacy.

Techniques used in this demo

conic-gradient()MDN ↗text-wrap: prettyMDN ↗color-mix()MDN ↗grid-templateMDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →