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

Modern Floating Glassmorphism Sidebar UI Component

The elevated dashboard rail: detached from the viewport edges, floating on a 16px inset with soft depth shadows, frosted with backdrop-filter so the app's ambient color bleeds through, and finished with the gradient hairline border that makes glass read as glass instead of gray plastic.

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-16">
  <aside class="sbl-16__glass" aria-label="Main">
    <div class="sbl-16__brand"><span aria-hidden="true"></span>Prism</div>
    <nav class="sbl-16__nav">
      <a href="#" aria-current="page"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5"/></svg>Overview</a>
      <a href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12a9 9 0 1 1-9-9"/><path d="M12 3a9 9 0 0 1 9 9h-9z"/></svg>Reports</a>
      <a href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="3.5"/><path d="M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5m1-13.5a3.5 3.5 0 0 1 0 7"/></svg>Audience</a>
      <a href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3m0 14v3M2 12h3m14 0h3M4.9 4.9l2.1 2.1m10 10 2.1 2.1m0-14.2-2.1 2.1m-10 10-2.1 2.1"/></svg>Settings</a>
    </nav>
    <div class="sbl-16__cta"><strong>Prism Pro</strong><small>Unlock cohort analysis</small><button type="button">Upgrade</button></div>
  </aside>
  <main class="sbl-16__main"><h1>Overview</h1><p>The rail floats on a 16px inset — frosted, gradient-edged, shadow-lifted. The aurora behind it is what the backdrop-filter is sampling.</p></main>
</section>
.sbl-16,
.sbl-16 *,
.sbl-16 *::before,
.sbl-16 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sbl-16 {
  --ink: oklch(0.96 0.005 280);
  --mut: oklch(0.78 0.02 280);
  --accent: oklch(0.75 0.14 200);
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100vh;
  height: 100dvh;
  font-family: system-ui,'Segoe UI',sans-serif;
  color: var(--ink);
  background: radial-gradient(55% 65% at 18% 22%,oklch(0.45 0.16 300 / .65),transparent 60%),radial-gradient(50% 60% at 85% 75%,oklch(0.5 0.15 220 / .55),transparent 65%),radial-gradient(40% 50% at 65% 15%,oklch(0.55 0.12 170 / .35),transparent 60%),oklch(0.16 0.025 280);
}

.sbl-16__glass {
  width: 248px;
  margin: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 14px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)) padding-box,linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,.12) 40%,rgba(255,255,255,.03)) border-box;
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 8px 32px oklch(0 0 0 / .3),0 2px 8px oklch(0 0 0 / .2);
}

.sbl-16__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 16px/1 system-ui,sans-serif;
  padding: 4px 10px 18px;
}

.sbl-16__brand span {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: conic-gradient(from 200deg,oklch(0.75 0.14 200),oklch(0.65 0.17 300),oklch(0.75 0.14 200));
}

.sbl-16__nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

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

.sbl-16__nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sbl-16__nav a:hover {
  color: var(--ink);
  background: rgba(255,255,255,.09);
}

.sbl-16__nav a[aria-current="page"] {
  color: var(--ink);
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

.sbl-16__nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sbl-16__cta {
  margin-top: auto;
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}

.sbl-16__cta strong {
  font: 650 13.5px/1 system-ui,sans-serif;
}

.sbl-16__cta small {
  font: 400 11.5px/1.4 system-ui,sans-serif;
  color: var(--mut);
}

.sbl-16__cta button {
  margin-top: 4px;
  padding: 9px;
  border: none;
  border-radius: 9px;
  background: var(--accent);
  color: oklch(0.18 0.03 220);
  font: 700 12.5px/1 system-ui,sans-serif;
  cursor: pointer;
  transition: filter .2s ease;
}

.sbl-16__cta button:hover {
  filter: brightness(1.08);
}

.sbl-16__cta button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

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

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

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

@media (prefers-reduced-motion: reduce) {
  .sbl-16__nav a,
    .sbl-16__cta button {
    transition: none;
  }
}
/* No JavaScript — an inset, radius-20 rail with backdrop-filter frost and a padding-box/border-box gradient hairline that fades like lit glass. */
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: Modern Floating Glassmorphism Sidebar UI Component
Source: https://codefronts.com/layouts/css-sidebar-layouts/floating-sidebar/

The elevated dashboard rail: detached from the viewport edges, floating on a 16px inset with soft depth shadows, frosted with backdrop-filter so the app's ambient color bleeds through, and finished with the gradient hairline border that makes glass read as glass instead of gray plastic.
## HTML
```html
<section class="sbl-16">
  <aside class="sbl-16__glass" aria-label="Main">
    <div class="sbl-16__brand"><span aria-hidden="true"></span>Prism</div>
    <nav class="sbl-16__nav">
      <a href="#" aria-current="page"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5"/></svg>Overview</a>
      <a href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12a9 9 0 1 1-9-9"/><path d="M12 3a9 9 0 0 1 9 9h-9z"/></svg>Reports</a>
      <a href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="3.5"/><path d="M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5m1-13.5a3.5 3.5 0 0 1 0 7"/></svg>Audience</a>
      <a href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3m0 14v3M2 12h3m14 0h3M4.9 4.9l2.1 2.1m10 10 2.1 2.1m0-14.2-2.1 2.1m-10 10-2.1 2.1"/></svg>Settings</a>
    </nav>
    <div class="sbl-16__cta"><strong>Prism Pro</strong><small>Unlock cohort analysis</small><button type="button">Upgrade</button></div>
  </aside>
  <main class="sbl-16__main"><h1>Overview</h1><p>The rail floats on a 16px inset — frosted, gradient-edged, shadow-lifted. The aurora behind it is what the backdrop-filter is sampling.</p></main>
</section>
```
## CSS
```css
.sbl-16,
.sbl-16 *,
.sbl-16 *::before,
.sbl-16 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sbl-16 {
  --ink: oklch(0.96 0.005 280);
  --mut: oklch(0.78 0.02 280);
  --accent: oklch(0.75 0.14 200);
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100vh;
  height: 100dvh;
  font-family: system-ui,'Segoe UI',sans-serif;
  color: var(--ink);
  background: radial-gradient(55% 65% at 18% 22%,oklch(0.45 0.16 300 / .65),transparent 60%),radial-gradient(50% 60% at 85% 75%,oklch(0.5 0.15 220 / .55),transparent 65%),radial-gradient(40% 50% at 65% 15%,oklch(0.55 0.12 170 / .35),transparent 60%),oklch(0.16 0.025 280);
}

.sbl-16__glass {
  width: 248px;
  margin: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 14px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)) padding-box,linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,.12) 40%,rgba(255,255,255,.03)) border-box;
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 8px 32px oklch(0 0 0 / .3),0 2px 8px oklch(0 0 0 / .2);
}

.sbl-16__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 16px/1 system-ui,sans-serif;
  padding: 4px 10px 18px;
}

.sbl-16__brand span {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: conic-gradient(from 200deg,oklch(0.75 0.14 200),oklch(0.65 0.17 300),oklch(0.75 0.14 200));
}

.sbl-16__nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

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

.sbl-16__nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sbl-16__nav a:hover {
  color: var(--ink);
  background: rgba(255,255,255,.09);
}

.sbl-16__nav a[aria-current="page"] {
  color: var(--ink);
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

.sbl-16__nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sbl-16__cta {
  margin-top: auto;
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}

.sbl-16__cta strong {
  font: 650 13.5px/1 system-ui,sans-serif;
}

.sbl-16__cta small {
  font: 400 11.5px/1.4 system-ui,sans-serif;
  color: var(--mut);
}

.sbl-16__cta button {
  margin-top: 4px;
  padding: 9px;
  border: none;
  border-radius: 9px;
  background: var(--accent);
  color: oklch(0.18 0.03 220);
  font: 700 12.5px/1 system-ui,sans-serif;
  cursor: pointer;
  transition: filter .2s ease;
}

.sbl-16__cta button:hover {
  filter: brightness(1.08);
}

.sbl-16__cta button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

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

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

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

@media (prefers-reduced-motion: reduce) {
  .sbl-16__nav a,
    .sbl-16__cta button {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — an inset, radius-20 rail with backdrop-filter frost and a padding-box/border-box gradient hairline that fades like lit glass. */
```

How this works

Floating means the sidebar is no longer a grid track touching three edges — it's an inset element: the shell keeps grid-template-columns:auto 1fr, but the aside gets margin:16px, border-radius:20px and a layered shadow (0 8px 32px ambient + 0 2px 8px contact). The frost is backdrop-filter:blur(18px) saturate(1.5) over a 7% white fill — saturate() is the half everyone forgets; it makes the colors behind the glass bloom instead of muddying to gray.

The realism detail is the border: real glass catches light unevenly, so a uniform 1px rgba border looks like plastic. Here the hairline is a gradient border — border:1px solid transparent with a padding-box fill plus a border-box linear-gradient(160deg, white 40% → transparent) — bright at the top-left where light 'hits', fading out at the bottom-right. The aurora background behind the shell exists to prove the frost: over a flat color, backdrop-filter is invisible.

Make it yours

  • Frost depth: blur(12px) crisp / blur(24px) deep — raise the white fill opacity in step or text contrast drops.
  • The inset (16px) is the float amount; 24px reads more editorial, 8px more utilitarian.
  • Tint the glass toward brand with background:color-mix(in oklab, var(--brand) 8%, rgba(255,255,255,.06)).
  • Nav pills inside glass should use white-mix tints, not solid fills — solid chips break the material illusion.

Gotchas — read before shipping

  • backdrop-filter needs visible content BEHIND the element — test over your real app, not a flat mock background.
  • Safari still wants -webkit-backdrop-filter; without it you get transparent, not frosted.
  • Text on glass needs a contrast audit against the BUSIEST possible backdrop, not the average one — 90%+ white text and 13px+ sizes only.

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

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

backdrop-filter is baseline since 2022. The gradient hairline works everywhere; oklch colors need 2023 engines.

Techniques used in this demo

conic-gradient()MDN ↗filterMDN ↗backdrop-filterMDN ↗text-wrap: prettyMDN ↗radial-gradient()MDN ↗grid-templateMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →