8 CSS Navbar Designs

A literary-magazine editorial navbar UI in ink and paper — proving that a responsive hamburger nav can carry serious typographic identity instead of disappearing into a sans-serif default. Top bar with a numbered issue badge (No. 47), a Playfair Display wordmark with italic rust accent, a column-ruled link list (Features / Culture / Opinion / Science / Archive) with a rust underline sweep on hover, a search icon button, and a black "Subscribe" CTA. On mobile (<900px) the desktop links hide and a 1.5px-line hamburger appears; clicking it morphs the three lines into an X and reveals a full-bleed dark drawer with six numbered category tiles (each with a Playfair label + monospace subtext) and a footer row carrying the tagline + "$9/mo" subscribe CTA. Below the navbar a rust-colored marquee ticker scrolls four headline items. Playfair Display + DM Mono. Best for editorial publications, online magazines, literary sites, indie newsletter brands, content-led marketing pages.

A luxury fashion mega menu navbar UI in deep void black with gold #c9a84c accents and Cormorant Garamond display type — proving a mega menu can carry editorial weight without the SaaS-default look. Top bar with a serif-italic "Aurèlia" wordmark and a 5-item menubar (Women, Men, Collections, Designers, Sale). Hovering Women drops a 4-column panel (Ready to Wear + Accessories + By Occasion link lists with New badges + an italic editorial card "The Art of Understated Power"). Men opens a 4-column with grooming + AW26 lookbook card. Collections shows a 4-up grid of seasonal collection cards (Lumière Douce SS26, Nuit Blanche Pre-Fall, Jardin Sauvage Capsule, Maison Éternelle Bridal). Designers gives a featured list + 12-tile A–Z directory + Voices from the Atelier interview card. Right-rail has Search, Account, and a gold-bordered Bag CTA with a "3" counter. Cormorant Garamond + Jost. Best for luxury fashion e-commerce, boutique storefronts, jewellery sites, perfume houses, premium B2C navigation.

A pill-shaped glassmorphism navbar UI floating 20px above the wrapper edge, built with backdrop-filter:blur() over a living aurora gradient background — proving that frosted-glass navbars composite cleanly against any vibrant scene. Four blurred radial-gradient orbs (violet, cyan, rose, green) drift in mix-blend-mode:screen across a deep #050311 backdrop, with a fractal noise overlay for grain. The pill nav itself has Syne wordmark + cyan dot, divider rule, link list with active-pill state + glowing cyan dot indicator, two has-drop dropdown triggers that reveal nested glassmorphic panels with icon tiles (⚡ Analytics, 🧠 AI Studio, 🔗 Integrations / 🏢 Enterprise, 🚀 Startups, 🎓 Education), Search + Theme icon buttons, and a cyan-to-violet gradient "Get Started" CTA. Below, a gradient-clipped "Build the future, fast." hero with three frosted demo cards. Syne + Inter. Best for SaaS product sites, AI/ML company landing pages, modern marketing chrome, cyberpunk-inflected dashboards.

A GitHub-dark-inspired collapsible sidebar navbar UI for a SaaS dashboard — proving that the canonical 240px ↔ 64px sidebar collapse pattern can carry a complete information density. Sidebar with gradient hex logo, a circular collapse-toggle button that rotates 180° on click, a workspace selector card (Acme Corp / Pro Plan), three nav sections (Overview / Workspace / System) with mono-uppercase labels and colour-coded badges (Live green, "12" blue, "2" orange, "3" red), and a bottom user row with gradient avatar. On collapse the entire 240px width animates to 64px — every label, badge, and the workspace info smoothly fade out — and tooltips appear on hover via a data-label attribute. The main pane carries a sticky topbar (breadcrumb / ⌘K search / notifications dot / command icon) and the actual dashboard content: 4-up stat cards (Revenue $84.2k +12.4%, Active Users 4,291, Deployments 138 −3.2%, Uptime 99.97%) plus a 14-bar Request Volume chart + Recent Activity feed. IBM Plex Sans + IBM Plex Mono. Best for SaaS admin panels, developer tools, internal dashboards, analytics platforms, B2B product chrome.

A sustainable lifestyle brand navbar UI that gracefully compresses on scroll — proving the right way to do scroll-transforming sticky navigation without janky reflow. The navbar starts at 96px tall with a large Fraunces serif "Sylvé" wordmark and a "Sustainable Living" sub-tagline beneath; as the page scrolls past 60px, a single class toggle (driven by IntersectionObserver scoped to this demo) compresses the bar to a 60px frosted-glass version, fades the sub-tagline out, and shrinks the wordmark to 1.3rem — all via pure CSS transitions, no JS animation loop. A 3px lime-to-clay gradient progress bar tracks reading depth at the very top of the wrapper. Below the navbar is a sage-and-sand long-form page: decorative circles in the hero, Fraunces italic "earth in mind" headline, a 3-up Regenerative/Zero-Waste/Transparent feature grid, a sage pull-quote divider, and a "Slow Living" journal section that gives readers reason to scroll. Fraunces + Mulish. Best for sustainable brands, lifestyle e-commerce, editorial product sites, slow-content brands, marketing pages that need scroll-aware chrome.

A creative-agency full-screen overlay menu navbar UI for Kairos/Studio — proving that hamburger nav can be the headline interaction instead of an afterthought. Minimal dark header with a Space Mono "Kairos/Studio" wordmark (lime slash) and an asymmetric three-line hamburger button (28/18/28 px). Clicking the burger triggers a two-panel curtain wipe (panel 1 #09090b + panel 2 #0f0f11 with a 0.05s delay) that fills the demo, then reveals five giant Bebas Neue stacked menu items (01 Work / 02 Studio / 03 Services / 04 Journal / 05 Contact) that slide up from below with staggered 50ms-step delays. A right sidebar panel fades in showing selected work links, a pulsing-lime "Available for projects" status dot, and four monospace social links. Hover any item: text turns lime, a lime arrow slides in. Closing reverses the curtain. The demo page itself carries a giant "KAIROS" outlined-stroke background letterform, a corner deco block, a randomised 5x5 dot grid, and a "We craft the unusual." hero with a lime CTA. Bebas Neue + Outfit + Space Mono. Best for creative agency sites, design studios, motion/portfolio brands, asymmetric editorial sites, full-bleed creative landings.

A CSS navbar with a built-in dark mode toggle that flips the entire UI in under half a second — proving that semantic design tokens beat a prefers-color-scheme media query when you want users to control the theme themselves. The frosted backdrop-filter navbar carries a Linea wordmark + version chip, 5 active-dot nav links (Overview / Components / Templates / Docs / Changelog), and a custom track-and-thumb theme toggle that transitions between sun and moon icons with a 0.45s ease. Click triggers a radial flash overlay that ripples outward as the body recolors. Below the navbar: a hero with a live token preview panel (4 swatch cards for --bg, --text, --accent, --border updating their hex values in real time) + a [data-theme] CSS code block that re-renders + a stats strip (48 Tokens / 2 Themes / 0.45s Transition). Bottom features grid covers semantic-token theming, CSS-only transitions, WCAG AA contrast, and localStorage persistence. Epilogue + Fira Code. Best for design system docs, developer tool sites, modern SaaS landing pages, theme-toggle component galleries.

A minimalist CSS navbar with three distinct underline hover animation techniques side-by-side — proving that the most elegant nav effects come from doing less, not more. Variant 1 (the production nav at top) uses a JS-driven magnetic ink line: a single absolutely-positioned 1.5px rail glides between hovered items via getBoundingClientRect, with a red static line marking the active item. Variant 2 is pure CSS — each link owns an ::after pseudo-element that starts at left: 50%; right: 50% (zero width, centered) and expands outward to the padding edge on hover, blooming symmetrically. Variant 3 uses the same ::after trick but transitions only one edge, producing a left-anchored directional wipe. The page includes a Libre Baskerville serif "art of the quiet hover" hero, an A–Z alphabet ticker where every letter gets the underline treatment, and a 4-row showcase list where each title gets a 2px red underline wipe on hover. Libre Baskerville + Instrument Sans. Best for editorial sites, personal portfolios, design studio navs, content-led blogs, minimalist typography-first layouts.