30 CSS Sidebar Layouts
22 / 30

All 30 in 30 CSS Sidebar Layouts

  1. 01Modern SaaS Dashboard Sidebar Menu with Native Dark Mode Switch
  2. 02Accessible Admin Panel Sidebar with CSS Tooltips and Icon Collapse
  3. 03Developer Documentation Sidebar with Scroll-Synced Nesting
  4. 04Mobile-First Responsive Sidebar to Bottom Navigation Switch Layout
  5. 05Data Analytics Sidebar Layout with CSS Subgrid Alignment
  6. 06Smooth Animated Collapsible Sidebar Menu with Icon-Only Mode
  7. 07CSS Position Sticky Sidebar Layout for E-Commerce and Blogs
  8. 08Pure CSS Collapsible Sidebar Drawer Menu without JavaScript
  9. 09CSS Fixed Sidebar Layout with Independent Scrollable Main Content
  10. 10Off-Canvas Navigation Drawer for Mobile & Desktop Web Apps
  11. 11Right-Aligned CSS Sidebar Layout for Secondary Tool Panels
  12. 12Two-Pane Webmail UI Layout with CSS Flexbox & Grid
  13. 13Dual Sidebar App Shell Layout with Left Nav and Right Context Panel
  14. 14Compact Mini Icon Rail Sidebar Navigation for SaaS Web Apps
  15. 15Responsive E-Commerce Product Filter Sidebar with Native Accordion Menu
  16. 16Modern Floating Glassmorphism Sidebar UI Component
  17. 17CSS Sidebar Menu with Sticky User Profile Footer
  18. 18Push Content Sidebar Navigation Layout with Smooth CSS Transitions
  19. 19Off-Canvas Sidebar Overlay Layout with Blur Backdrop
  20. 20Persistent Collapsible State Sidebar with CSS Variables
  21. 21App Sidebar Navigation with Integrated Sticky Search Bar
  22. 22Section-Grouped Sidebar Navigation Menu with Header Labels
  23. 23CSS Target Active Indicator Sidebar Menu without JavaScript
  24. 24Multi-Level Nested Tree Sidebar Navigation Layout
  25. 25Multi-Tab Sidebar UI Component with Dynamic Panel Switching
  26. 26Onboarding Wizard Sidebar Layout with Step Progress Tracking
  27. 27Pure CSS Resizable Sidebar Layout Using Resize Property
  28. 28Three-Pane Productivity Workspace Shell Layout
  29. 29Next-Gen Adaptive Sidebar Layout Using CSS Container Queries
  30. 30Frosted Glass Floating Sidebar Layout with Backdrop Blur
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.

Live Demo
Plain CSSTailwind v4
Try it

Mosaic by Cruip: a complete Tailwind admin dashboard template in HTML, React, Next.js and Vue · $69

Cruip · Mosaic by Cruip · Affiliate link

View Mosaic dashboard

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 ↗grid-templateMDN ↗color-mix()MDN ↗:focus-visibleMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →