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 <input type="checkbox" id="t"> sits at the top of the wrapper. A <label for="t"> anywhere in the DOM toggles that checkbox when clicked. The sibling combinator .toggle:checked ~ .sidebar { width: 74px } then collapses the rail. Labels inside (item text, badges, group captions) fade with opacity: 0 + pointer-events: none so the rail is visually icon-only but stays keyboard-reachable. The width transition uses cubic-bezier(.4,0,.2,1) 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: #m1:checked ~ .sub-l1 { max-height: 360px }. Tier 2: #m2:checked ~ .sub-l2 { max-height: 200px }. The general sibling combinator (~) lets each toggle reach across DOM cousins, so the level-2 toggle inside .sub-l1 still controls .sub-l2. The trick that makes it animate cleanly is using max-height (not height: auto, which can't transition). Match each max-height to the sum of its children's heights; if the content is dynamic, use max-height: 100vh 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 position: fixed; top: 0; left: 0; bottom: 0; width: 280px, and the main content area gets margin-left: 280px so the article scrolls independently. The breadcrumb topbar inside the content area adds position: sticky; top: 0 plus backdrop-filter: blur(10px) for the frosted scroll-survival effect. If you prefer a CSS grid layout instead of margin-offset (cleaner for nested scroll containers), use display: grid; grid-template-columns: 280px 1fr on the wrapper and position: sticky; top: 0; height: 100vh 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: background: rgba(255,255,255,.1) sets a translucent fill, backdrop-filter: blur(22px) saturate(160%) blurs whatever shows through the panel (use -webkit-backdrop-filter too for Safari), and box-shadow: inset 0 1px 0 rgba(255,255,255,.3) 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 ::before 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 transform: translateX(-100%) (slid off-screen), and a sibling overlay div has opacity: 0; visibility: hidden. A hidden checkbox is the state holder; the hamburger button is a <label for="m"> that toggles it. When checked, .toggle:checked ~ .drawer { transform: translateX(0) } slides the drawer in, and .toggle:checked ~ .overlay { opacity: 1; visibility: visible } fades in the dimmed backdrop. The overlay itself is also a <label for="m">, so tapping outside the drawer closes it — a true responsive offcanvas drawer with no JavaScript.

Demo 10 uses one CSS property — margin-top: auto on the profile wrapper. The parent <aside class="sidebar"> must be display: flex; flex-direction: column, and the nav above must be flex: 1 to consume the remaining space. margin-top: auto 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 position: absolute; bottom: 0, which lifts the block out of normal flow and can overlap scrolling content.

Every sidebar is wrapped in its own scoped class — .sn-clp (collapsible rail), .sn-rsp (responsive editorial), .sn-rai (neon icon rail), .sn-dsh (dashboard submenus), .sn-mul (multi-level CRM), .sn-acc (brutalist accordion), .sn-fix (fixed full-height docs), .sn-gls (glassmorphism floating), .sn-off (mobile off-canvas), .sn-pin (bottom-pinned profile). All :root { --foo: … } design tokens from the source mocks are re-scoped to .sn-XX { --sn-XX-foo: … } 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 label[for] attribute is renamed with the sn-XX- prefix so two demos with the same control name (every sidebar has a #t or #d toggle in the source) can coexist. All ten demos render side-by-side on the gallery without a single style or state collision.