10 CSS Sidebar Navigation

Match the pattern to the depth and density of the navigation. A documentation site with 6-10 top-level destinations and an option to focus on the body content wants the collapsible rail from demo 1 — the user toggles between full nav and an icon-only strip with one click (this is the canonical 'css side menu hide show click' pattern), no JavaScript needed. A content site that needs to disappear the navigation on mobile (the most common case) wants the off-canvas drawer from demo 2 — desktop sees a permanent index, mobile gets a hamburger-summoned drawer with a dismiss overlay. A media or creative app where the sidebar is part of the brand visual wants the expanding icon rail from demo 3 — collapsed shows icons with hover tooltips, expanded shows full labels with a bouncy cubic-bezier settle. A SaaS analytics dashboard with grouped functionality wants demo 4 — sidebar dropdown menu HTML/CSS with submenus driven by checkboxes and rotating chevrons. An enterprise tool with three-tier information architecture wants the multi-level template from demo 5 — nested vertical navigation with submenus inside submenus. A documentation portal whose sidebar stays pinned while the article scrolls wants the fixed full-height layout from demo 7. A landing page or premium dashboard where the sidebar IS the brand visual wants the glassmorphic floating rail from demo 8. A mobile-first app where the drawer must slide out from the left over a dimmed overlay wants demo 9. And a productivity tool that needs to push the user profile or settings block to the bottom of the rail wants demo 10.

Demo 1 uses the classic checkbox-hack pattern — the same trick that powers every pure-CSS drawer menu that toggles between text and icons. A hidden <code>&lt;input type="checkbox" id="t"&gt;</code> sits at the top of the wrapper. A <code>&lt;label for="t"&gt;</code> anywhere in the DOM toggles that checkbox when clicked. The sibling combinator <code>.toggle:checked ~ .sidebar { width: 74px }</code> then collapses the rail. Labels inside (item text, badges, group captions) fade with <code>opacity: 0 + pointer-events: none</code> so the rail is visually icon-only but stays keyboard-reachable. The width transition uses <code>cubic-bezier(.4,0,.2,1)</code> for the natural 320ms ease. Zero JavaScript, zero dependencies — just two HTML elements and one CSS rule pair, and you have a side menu that hides and shows on click.

Demo 5 nests submenus inside submenus using independent checkbox + selector pairs at each tier — the cleanest pattern for nested vertical navigation in CSS. Tier 1: <code>#m1:checked ~ .sub-l1 { max-height: 360px }</code>. Tier 2: <code>#m2:checked ~ .sub-l2 { max-height: 200px }</code>. The general sibling combinator (<code>~</code>) lets each toggle reach across DOM cousins, so the level-2 toggle inside <code>.sub-l1</code> still controls <code>.sub-l2</code>. The trick that makes it animate cleanly is using <code>max-height</code> (not <code>height: auto</code>, which can't transition). Match each <code>max-height</code> to the sum of its children's heights; if the content is dynamic, use <code>max-height: 100vh</code> and accept the close animation will run the full duration regardless of actual content. For a single-tier sidebar dropdown menu in HTML/CSS, demo 4 is simpler — one checkbox per group, one rotating chevron, one expanding submenu.

Demo 7 is the docs-style fixed full-height layout — the sidebar takes <code>position: fixed; top: 0; left: 0; bottom: 0; width: 280px</code>, and the main content area gets <code>margin-left: 280px</code> so the article scrolls independently. The breadcrumb topbar inside the content area adds <code>position: sticky; top: 0</code> plus <code>backdrop-filter: blur(10px)</code> for the frosted scroll-survival effect. If you prefer a CSS grid layout instead of margin-offset (cleaner for nested scroll containers), use <code>display: grid; grid-template-columns: 280px 1fr</code> on the wrapper and <code>position: sticky; top: 0; height: 100vh</code> on the sidebar — same sticky vertical menu behaviour, no fixed-positioning side effects on z-index stacking or transformed parents.

Demo 8 layers three CSS properties to get the frosted-glass look: <code>background: rgba(255,255,255,.1)</code> sets a translucent fill, <code>backdrop-filter: blur(22px) saturate(160%)</code> blurs whatever shows through the panel (use <code>-webkit-backdrop-filter</code> too for Safari), and <code>box-shadow: inset 0 1px 0 rgba(255,255,255,.3)</code> adds the top-edge highlight that makes the rail feel physically raised. The backdrop-filter only produces a visible blur effect if there's something interesting behind it — demo 8 paints three overlapping radial-gradient orbs plus an animated <code>::before</code> blob so the rail always has rich colour to blur. The same recipe works for any glassmorphic side nav, modal, header, or floating card.

Demos 2, 4, 5, 6, and 9 all use the off-canvas drawer pattern, which is pure CSS. The mobile-first version in demo 9 is the cleanest reference — the drawer defaults to <code>transform: translateX(-100%)</code> (slid off-screen), and a sibling overlay div has <code>opacity: 0; visibility: hidden</code>. A hidden checkbox is the state holder; the hamburger button is a <code>&lt;label for="m"&gt;</code> that toggles it. When checked, <code>.toggle:checked ~ .drawer { transform: translateX(0) }</code> slides the drawer in, and <code>.toggle:checked ~ .overlay { opacity: 1; visibility: visible }</code> fades in the dimmed backdrop. The overlay itself is also a <code>&lt;label for="m"&gt;</code>, so tapping outside the drawer closes it — a true responsive offcanvas drawer with no JavaScript.

Demo 10 uses one CSS property — <code>margin-top: auto</code> on the profile wrapper. The parent <code>&lt;aside class="sidebar"&gt;</code> must be <code>display: flex; flex-direction: column</code>, and the nav above must be <code>flex: 1</code> to consume the remaining space. <code>margin-top: auto</code> then pushes the profile to the bottom without absolute positioning, so it never overlaps the nav and always sits naturally at the bottom whether you have 3 nav items or 30. This is the cleanest way to push any menu item to the bottom of a CSS sidebar — far better than <code>position: absolute; bottom: 0</code>, which lifts the block out of normal flow and can overlap scrolling content.

Every sidebar is wrapped in its own scoped class — <code>.sn-clp</code> (collapsible rail), <code>.sn-rsp</code> (responsive editorial), <code>.sn-rai</code> (neon icon rail), <code>.sn-dsh</code> (dashboard submenus), <code>.sn-mul</code> (multi-level CRM), <code>.sn-acc</code> (brutalist accordion), <code>.sn-fix</code> (fixed full-height docs), <code>.sn-gls</code> (glassmorphism floating), <code>.sn-off</code> (mobile off-canvas), <code>.sn-pin</code> (bottom-pinned profile). All <code>:root { --foo: … }</code> design tokens from the source mocks are re-scoped to <code>.sn-XX { --sn-XX-foo: … }</code> so they don't leak to the host page or collide with other demos. Body-level styles (background, font-family, the flex layout) are re-applied to the wrapper instead. Every checkbox / radio ID and every <code>label[for]</code> attribute is renamed with the <code>sn-XX-</code> prefix so two demos with the same control name (every sidebar has a <code>#t</code> or <code>#d</code> toggle in the source) can coexist. All ten demos render side-by-side on the gallery without a single style or state collision.