8 CSS Navbar Designs

Match the pattern to the content density and the brand voice. A content site with 4-7 top-level destinations should use the editorial bar from demo 1 (Verdure) — the column-ruled link list reads as discipline and editorial weight, not as 'tech startup default'. An e-commerce site with deep taxonomy needs the mega menu from demo 2 (Aurélia) so visitors can drill into the third level (Ready to Wear → Coats → Trench) without three page loads. A SaaS marketing page with a vibrant gradient hero is the natural home for the glassmorphic pill from demo 3 (Nōva) — the frosted blur is the whole pitch. A product dashboard with deep navigation needs the collapsible sidebar from demo 4 (hexlane). A scroll-heavy storytelling page (lookbook, manifesto, journal) benefits from the sticky-compress nav in demo 5 (Sylvé). A creative agency or portfolio site that wants the menu to BE the moment chooses the overlay from demo 6 (Kairos).

Three rules. (1) The trigger is a real `<button type="button">` with `aria-label="Open menu"` and `aria-expanded` that syncs to open state — screen readers announce the state change. (2) The drawer panel has `aria-hidden` that flips with the open class so it's not in the accessibility tree when collapsed. (3) Focus is moved to the first interactive item in the drawer when it opens, and Escape closes it. Demo 1 (Verdure) wires the first two; the third is one extra line per project. Don't rely on a CSS-only `<input type="checkbox">` hamburger — screen readers can't announce checkbox states as menu states, and keyboard focus order breaks across the trigger/panel split.

Demo 2 (Aurélia) opens its 4-column panels on `:hover` and `:focus-within` — that's the e-commerce-store convention because shoppers in a hurry want zero-click navigation. The CSS uses `position: static` on the trigger `<li>` plus an absolute-positioned `.mega` that spans the full nav width, which keeps the panel anchored to the nav even when triggers shift sideways at different viewports. The two-state interaction (`:hover` opens, mouse-out closes) needs no JS, but the trade-off is accessibility: keyboard-only users need `:focus-within` for the same behaviour, which the demo provides. Touch devices fall back to the click semantics that `<button>` provides naturally.

Demo 4 (hexlane) uses a single CSS custom-property pair — `--nb-sdb-sidebar-w: 240px` and `--nb-sdb-sidebar-collapsed: 64px` — applied as `width` on `aside`. When the JS toggles `.collapsed`, every label, badge, and the workspace info animates `opacity` and `width: 0` together (so they collapse cleanly to the icon-only rail without leaving ghost whitespace). The main pane uses `flex: 1` so it expands to fill the freed space automatically. Tooltips appear via `data-label` attribute + `::after` pseudo-element shown only on `.collapsed .nav-item:hover` — no JS tooltip library needed. The whole collapse is a 220ms `cubic-bezier(0.4, 0, 0.2, 1)` transition that finishes before the user can perceive jank.

Yes, and that's why this collection re-scopes every `position: fixed` element to `position: absolute` (or `position: sticky` where the demo genuinely wants to track wrapper scroll). The source mocks all use `fixed` because they assume they own the viewport. Inside our gallery each demo is wrapped in `.nb-XX` and the bar is bounded to that wrapper, so multiple demos render side-by-side without their nav chrome colliding. Demo 5's sticky scroll uses an IntersectionObserver bound to the hero sentinel — when the host page scrolls past the demo's hero, the navbar gets the `.scrolled` class. Demo 6's overlay menu's `Escape` listener is bound to the wrapper instead of `document`, so closing one demo's menu doesn't close another's.

Every navbar is wrapped in its own scoped class — `.nb-hbg` (editorial hamburger), `.nb-mga` (luxury mega menu), `.nb-gls` (glass pill), `.nb-sdb` (sidebar), `.nb-stk` (sticky scroll), `.nb-ovl` (overlay). All `:root { --foo: … }` design tokens from the source mocks are re-scoped to `.nb-XX { --nb-XX-foo: … }` so they don't leak to the host page or collide with the host's own custom-property names. Body-level styles (background, font-family, padding, overflow, `display: flex` for the sidebar layout) are re-applied to the wrapper. The same scoping discipline used in the minimalist UI and neon collections — six full-page navbar mocks coexist on the gallery.