30 CSS Sidebar Layouts
24 / 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

Multi-Level Nested Tree Sidebar Navigation Layout

A file-explorer-grade tree: three levels of nested <details> disclosure with rotating chevrons, indent guides drawn as borders so hierarchy stays legible at any depth, folder/file iconography, and progressive padding from a single --indent variable — the whole tree keyboard-operable out of the box because disclosure is native.

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-24">
  <aside class="sbl-24__rail" aria-label="Project files">
    <h2 class="sbl-24__title">explorer</h2>
    <details class="sbl-24__branch" open>
      <summary><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>src</summary>
      <div class="sbl-24__kids" style="--indent:1">
        <details class="sbl-24__branch" open>
          <summary><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>components</summary>
          <div class="sbl-24__kids" style="--indent:2">
            <a class="sbl-24__leaf" href="#" aria-current="page"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2h9l5 5v15H6zM14 2v6h6"/></svg>Sidebar.css</a>
            <a class="sbl-24__leaf" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2h9l5 5v15H6zM14 2v6h6"/></svg>Sidebar.html</a>
          </div>
        </details>
        <details class="sbl-24__branch">
          <summary><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>tokens</summary>
          <div class="sbl-24__kids" style="--indent:2">
            <a class="sbl-24__leaf" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2h9l5 5v15H6zM14 2v6h6"/></svg>colors.css</a>
            <a class="sbl-24__leaf" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2h9l5 5v15H6zM14 2v6h6"/></svg>spacing.css</a>
          </div>
        </details>
        <a class="sbl-24__leaf" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2h9l5 5v15H6zM14 2v6h6"/></svg>index.html</a>
      </div>
    </details>
    <details class="sbl-24__branch">
      <summary><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>docs</summary>
      <div class="sbl-24__kids" style="--indent:1">
        <a class="sbl-24__leaf" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2h9l5 5v15H6zM14 2v6h6"/></svg>README.md</a>
      </div>
    </details>
  </aside>
  <main class="sbl-24__main"><h1>Sidebar.css</h1><p>Every branch is a native &lt;details&gt; — keyboard toggling and state come free. Indent guides keep level 3 legible.</p></main>
</section>
.sbl-24,
.sbl-24 *,
.sbl-24 *::before,
.sbl-24 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sbl-24 {
  --panel: oklch(0.16 0.012 250);
  --ink: oklch(0.92 0.005 250);
  --mut: oklch(0.62 0.012 250);
  --line: oklch(0.27 0.014 250);
  --accent: oklch(0.75 0.12 210);
  display: grid;
  grid-template-columns: 264px 1fr;
  height: 100vh;
  height: 100dvh;
  font-family: system-ui,'Segoe UI',sans-serif;
  background: oklch(0.13 0.01 250);
  color: var(--ink);
}

.sbl-24__rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 16px 10px;
  overflow-y: auto;
  font-family: ui-monospace,'Cascadia Code',Menlo,monospace;
}

.sbl-24__title {
  font: 600 10.5px/1 ui-monospace,Menlo,monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--mut);
  padding: 2px 12px 12px;
}

.sbl-24__branch summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  padding-inline-start: calc(10px + (var(--indent,0)) * 18px);
  border-radius: 8px;
  font: 500 13px/1 ui-monospace,Menlo,monospace;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: background-color .15s ease;
}

.sbl-24__branch summary::-webkit-details-marker {
  display: none;
}

.sbl-24__branch summary:hover {
  background: color-mix(in oklab,var(--ink) 6%,transparent);
}

.sbl-24__branch summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.sbl-24__branch summary svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--mut);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate .2s ease;
}

.sbl-24__branch[open] > summary svg {
  rotate: 90deg;
}

.sbl-24__kids {
  display: flex;
  flex-direction: column;
  border-inline-start: 1px solid var(--line);
  margin-inline-start: calc(16px + (var(--indent) - 1) * 18px);
}

.sbl-24__kids .sbl-24__branch summary,
.sbl-24__kids .sbl-24__leaf {
  padding-inline-start: 12px;
}

.sbl-24__leaf {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font: 400 13px/1 ui-monospace,Menlo,monospace;
  color: var(--mut);
  text-decoration: none;
  transition: background-color .15s ease,color .15s ease;
}

.sbl-24__leaf svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.sbl-24__leaf:hover {
  color: var(--ink);
  background: color-mix(in oklab,var(--ink) 6%,transparent);
}

.sbl-24__leaf[aria-current="page"] {
  color: var(--accent);
  background: color-mix(in oklab,var(--accent) 12%,transparent);
}

.sbl-24__leaf:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

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

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

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

@media (prefers-reduced-motion: reduce) {
  .sbl-24__branch summary svg,
    .sbl-24__leaf,
    .sbl-24__branch summary {
    transition: none;
  }
}
/* No JavaScript — nested native <details> branches; indentation and guide rails derive from one --indent variable per level. */
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: Multi-Level Nested Tree Sidebar Navigation Layout
Source: https://codefronts.com/layouts/css-sidebar-layouts/nested-expandable-nav/

A file-explorer-grade tree: three levels of nested <details> disclosure with rotating chevrons, indent guides drawn as borders so hierarchy stays legible at any depth, folder/file iconography, and progressive padding from a single --indent variable — the whole tree keyboard-operable out of the box because disclosure is native.
## HTML
```html
<section class="sbl-24">
  <aside class="sbl-24__rail" aria-label="Project files">
    <h2 class="sbl-24__title">explorer</h2>
    <details class="sbl-24__branch" open>
      <summary><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>src</summary>
      <div class="sbl-24__kids" style="--indent:1">
        <details class="sbl-24__branch" open>
          <summary><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>components</summary>
          <div class="sbl-24__kids" style="--indent:2">
            <a class="sbl-24__leaf" href="#" aria-current="page"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2h9l5 5v15H6zM14 2v6h6"/></svg>Sidebar.css</a>
            <a class="sbl-24__leaf" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2h9l5 5v15H6zM14 2v6h6"/></svg>Sidebar.html</a>
          </div>
        </details>
        <details class="sbl-24__branch">
          <summary><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>tokens</summary>
          <div class="sbl-24__kids" style="--indent:2">
            <a class="sbl-24__leaf" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2h9l5 5v15H6zM14 2v6h6"/></svg>colors.css</a>
            <a class="sbl-24__leaf" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2h9l5 5v15H6zM14 2v6h6"/></svg>spacing.css</a>
          </div>
        </details>
        <a class="sbl-24__leaf" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2h9l5 5v15H6zM14 2v6h6"/></svg>index.html</a>
      </div>
    </details>
    <details class="sbl-24__branch">
      <summary><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>docs</summary>
      <div class="sbl-24__kids" style="--indent:1">
        <a class="sbl-24__leaf" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2h9l5 5v15H6zM14 2v6h6"/></svg>README.md</a>
      </div>
    </details>
  </aside>
  <main class="sbl-24__main"><h1>Sidebar.css</h1><p>Every branch is a native &lt;details&gt; — keyboard toggling and state come free. Indent guides keep level 3 legible.</p></main>
</section>
```
## CSS
```css
.sbl-24,
.sbl-24 *,
.sbl-24 *::before,
.sbl-24 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sbl-24 {
  --panel: oklch(0.16 0.012 250);
  --ink: oklch(0.92 0.005 250);
  --mut: oklch(0.62 0.012 250);
  --line: oklch(0.27 0.014 250);
  --accent: oklch(0.75 0.12 210);
  display: grid;
  grid-template-columns: 264px 1fr;
  height: 100vh;
  height: 100dvh;
  font-family: system-ui,'Segoe UI',sans-serif;
  background: oklch(0.13 0.01 250);
  color: var(--ink);
}

.sbl-24__rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 16px 10px;
  overflow-y: auto;
  font-family: ui-monospace,'Cascadia Code',Menlo,monospace;
}

.sbl-24__title {
  font: 600 10.5px/1 ui-monospace,Menlo,monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--mut);
  padding: 2px 12px 12px;
}

.sbl-24__branch summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  padding-inline-start: calc(10px + (var(--indent,0)) * 18px);
  border-radius: 8px;
  font: 500 13px/1 ui-monospace,Menlo,monospace;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: background-color .15s ease;
}

.sbl-24__branch summary::-webkit-details-marker {
  display: none;
}

.sbl-24__branch summary:hover {
  background: color-mix(in oklab,var(--ink) 6%,transparent);
}

.sbl-24__branch summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.sbl-24__branch summary svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--mut);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate .2s ease;
}

.sbl-24__branch[open] > summary svg {
  rotate: 90deg;
}

.sbl-24__kids {
  display: flex;
  flex-direction: column;
  border-inline-start: 1px solid var(--line);
  margin-inline-start: calc(16px + (var(--indent) - 1) * 18px);
}

.sbl-24__kids .sbl-24__branch summary,
.sbl-24__kids .sbl-24__leaf {
  padding-inline-start: 12px;
}

.sbl-24__leaf {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font: 400 13px/1 ui-monospace,Menlo,monospace;
  color: var(--mut);
  text-decoration: none;
  transition: background-color .15s ease,color .15s ease;
}

.sbl-24__leaf svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.sbl-24__leaf:hover {
  color: var(--ink);
  background: color-mix(in oklab,var(--ink) 6%,transparent);
}

.sbl-24__leaf[aria-current="page"] {
  color: var(--accent);
  background: color-mix(in oklab,var(--accent) 12%,transparent);
}

.sbl-24__leaf:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

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

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

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

@media (prefers-reduced-motion: reduce) {
  .sbl-24__branch summary svg,
    .sbl-24__leaf,
    .sbl-24__branch summary {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — nested native <details> branches; indentation and guide rails derive from one --indent variable per level. */
```

How this works

Each branch is <details><summary>Folder</summary>…children…</details>, nested as deep as the data goes. Native details buys the hard parts: Enter/Space toggling, per-branch open state with no state management, and correct expanded/collapsed announcements. Indentation is computed, not hand-set: levels declare --indent:1/2/3 and every row derives padding-inline-start:calc(10px + var(--indent) * 18px) — restructure the tree and the geometry follows.

The indent guides — the vertical hairlines connecting children to parents — are border-inline-start on the nested container, inset to align under the parent's chevron. They're what keeps deep trees scannable: without guides, level 3+ items visually float. Chevrons rotate 90° on [open] (the file-tree convention: right=closed, down=open, vs accordion's down/up), and leaf rows swap the chevron for a document glyph, sized identically so text columns align across branch and leaf rows.

Make it yours

  • Deeper nesting: add --indent:4 etc. — padding and guides are already parametric.
  • Exclusive sibling folders: same-level name="…" attributes close siblings automatically (native, zero JS).
  • Whole-tree expand/collapse: 3 lines of JS looping details.open = true — the only thing CSS can't do here.
  • Selected-file state: aria-current on the leaf link + the tinted style already used across this collection.

Gotchas — read before shipping

  • Only the summary toggles — put file links OUTSIDE summaries (as leaf rows here); a link inside a summary makes both fight over the click.
  • Indent guides must be on the CONTAINER, not per-row left borders, or the line breaks at each row gap.
  • Deep trees + small type get claustrophobic: keep 13px minimum and let rows breathe at 36px even in dense mode.

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 12+.

details/summary is one of the oldest interactive primitives — this runs literally everywhere; the name attribute (exclusive open) is 2024 sugar on top.

Techniques used in this demo

text-wrap: prettyMDN ↗grid-templateMDN ↗color-mix()MDN ↗:focus-visibleMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →