CSS Navigation & Menu Examples — Free Code Collections
Navigation tells users where they are and where they can go. This collection covers every navigation pattern developers actually build — responsive navbars, dropdown menus, hamburger patterns, tabs, accordions, and more.
Menus & Navbars
13 collections
20 CSS Pagination
20 hand-coded CSS pagination designs for admin dashboards, e-commerce product grids, blog archives, search results, and documentation sites. Covers pure-CSS no-JavaScript pagination driven by the :target selector, ellipsis truncation for large page ranges, responsive layouts that collapse from full numbers to a compact page-X-of-N on mobile via container queries, first/last/prev/next icon buttons, a jump-to-page input, an items-per-page selector, Tailwind CSS and Bootstrap 5 variants, WCAG-compliant ARIA markup with aria-current and visible focus rings, data-table and admin bars, e-commerce grids with result counts, blog archives, cursor-based load-newer/older feeds, sliding pill active indicators, hover underline animations, 3D flip perspective keys, vertical side-docked rails, full-width fluid splits, glassmorphism, and neumorphic soft UI. 16 are pure CSS with zero JavaScript. Every design is scoped under a .pgn-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
25 CSS Sticky Navigation
25 hand-coded CSS sticky navigation patterns for SaaS marketing headers, documentation shells, e-commerce storefronts, article readers, and mobile app views. Pure CSS position:sticky with zero JavaScript, responsive hamburger toggle, shrink-on-scroll header, hide-on-scroll-down / reveal-on-scroll-up, transparent-to-solid over hero, article reading progress bar, wordmark-to-mark logo morph, underline-slide active indicator, theme-aware token swap, split centered-logo layout, neumorphic soft-UI, multi-column mega menu dropdown (e-commerce), search bar + cart badge counter, announcement bar stacked above nav, sticky sub-navigation locked under main header, icon-to-full-width search expand, sticky sidebar table-of-contents (Docusaurus / Mintlify pattern), mobile bottom tab bar with env(safe-area-inset-bottom), active-section scrollspy, horizontal snap-scroll tab bar, and a social-share icon strip for articles. 7 Pure CSS + 18 Light JS. Uses @container scroll-state(stuck:top), animation-timeline: scroll(), IntersectionObserver, and standard scroll listeners as appropriate per demo. Every design scoped under .sn-NN prefix for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, framework-agnostic (React, Vue, Svelte, Astro, Next.js, Nuxt, Remix, SvelteKit).
28 CSS Hamburger Menus
28 hand-coded CSS hamburger menus covering the exact patterns SaaS builders, e-commerce teams, mobile-app designers, and marketing sites actually ship: clip-path circle expand, ARIA-audited keyboard-navigable, animated 3-line to X icon morphs, off-canvas drawers with dimmed backdrops, pure CSS checkbox-hack (zero JavaScript), integrated search + social drawers, glassmorphism backdrop-blur overlays, push-canvas content shifts, full-screen mobile takeovers, slide-out sidebars, responsive navbar toggles with media queries, minimalist floating buttons, Tailwind CSS component recipes, Bootstrap 5 navbar toggler setups, WCAG 2.2 AA dialogs with focus trap + Escape, grid-template-rows slide-down dropdowns, mobile bottom nav bars with floating FAB, multi-level accordion nested menus with <details>, flexbox right-aligned patterns, radial ripple expansions, sticky shrinking icons on scroll, neumorphic soft-UI toggles, brutalist bordered icons, and 3D flip canvas transforms. 11 truly Pure CSS + 17 with a tiny optional vanilla JS snippet + 1 Tailwind + 1 Bootstrap 5 wiring. Every menu is scoped under a unique .chm-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards on every animation, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
26 CSS Circular Menus
26 hand-coded CSS circular and radial menu designs, from the floating-action FAB speed dial and dashboard radial hubs to game-style pie-slice wheels, SVG gooey metaball fans, hexagonal honeycombs, iris-aperture reveals, orbiting satellites on offset-path, compass-rose directional nav, sci-fi HUD rings, glassmorphism popovers built on the native Popover API, vinyl-record players, and full-takeover nebula overlays on native dialog. Every design uses CSS trigonometry (sin(), cos()) or the counter-rotation trick for positioning, ships real keyboard navigation, aria-labels on icon-only buttons, and a prefers-reduced-motion guard. Copy-paste HTML, CSS and vanilla JS with zero framework dependencies — MIT licensed.
11 CSS Glassmorphic Sticky Navbars
11 hand-coded CSS glassmorphic sticky navbars using backdrop-filter blur + saturate: SaaS landing header, scroll-triggered frost, dark cyberpunk, floating pill, glass mega menu, mobile drawer, Core Web Vitals baseline, animated conic border, WCAG-AA accessible, React + Framer Motion, minimalist portfolio. Every navbar is position:sticky with proper scroll containers. Zero dependencies, framework-agnostic, MIT licensed.
24 CSS Liquid Glass Navbars
24 hand-coded CSS Liquid Glass navbars inspired by Apple's WWDC 2025 design language (iOS 26 / macOS Tahoe / visionOS). Floating tab bars, sticky glass headers, Dynamic Island navigation, capsule active tabs, cursor-warp menus, mega dropdowns, and responsive sidebar-to-bottom-tab reflows. Zero dependencies vs Aceternity UI, Magic UI, shadcn glass. Core Web Vitals safe (CLS 0, INP-friendly, compositor-only motion), WCAG 2.2 AA accessible with prefers-reduced-motion + prefers-reduced-transparency + focus-visible on every interactive, MIT licensed.
17 CSS Side Menu Designs
17 hand-coded CSS side menu designs with live demos — slide-in checkbox-hack drawer, smooth-overlay panel, off-canvas push sidebar, expandable icon-only rail, responsive hidden-to-visible menu, sticky fixed vertical nav, multi-level accordion, full-height flexbox, neumorphic inset, glassmorphism blurred, dark-mode cyberpunk neon, brutalist left-hand border, hamburger checkbox-hack, hover-triggered drawer, collapsible width-transition, CSS-only accordion side navigation, and a macOS Tahoe Liquid Glass sidebar dock that fluidly expands to reveal labels on hover with a sliding specular highlight (Apple iOS 26 / macOS Tahoe aesthetic). 16 Pure CSS + 1 CSS+JS. WCAG 2.2 friendly with prefers-reduced-motion on every animation, MIT licensed, copy-paste ready.
22 CSS Dropdown Menu Designs
22 hand-coded CSS dropdown menu designs with live demos — slide-down fade, clip-path curtain reveal, 3D perspective flip, elastic bounce spring, glassmorphism float panel, stagger children reveal, mega-menu grid, underline nav fade, native details/summary, checkbox-hack mobile nav, nested multi-level flyout, icon sidebar flyout, split-screen mega-menu, segmented pill nav, color swatch picker, right-click context menu, keyboard-accessible roving tabindex, stagger blur entrance, command palette search, autocomplete suggestion, click-outside close, and multi-select chip. 15 pure CSS + 7 with a tiny vanilla JS snippet — no framework. WCAG 2.2 aria-expanded + aria-haspopup + focus management, prefers-reduced-motion honoured, MIT licensed.
20 CSS Responsive Navbar Designs
20 hand-coded CSS responsive navbar designs with live demos — glassmorphism frosted bar, CSS-only mega menu, sidebar drawer, animated underline tabs, pill highlight, scroll-shrink on scroll, synthwave neon, reading-progress breadcrumb, split two-tone, mobile bottom tab bar, conic-gradient animated border, centered logo, icon dot indicator, full-screen overlay, morphing search expand, floating island, step wizard, vertical rail, dual announcement bar, and scroll-spy active highlight. 14 pure CSS + 6 with a tiny vanilla JS snippet — no framework. Mobile-first, WCAG-friendly, copy-paste ready, MIT licensed.
15 CSS Navigation Menu Designs
15 hand-coded CSS navigation menu designs covering every production navigation pattern developers ship — horizontal navigation bar with hover underline, dropdown navigation menu, full mega menu with category columns and feature panel, hamburger menu with slide-out drawer, full-screen overlay navigation, sticky navigation bar with scroll shrink (scroll-driven CSS animation), sidebar navigation menu, tab navigation with animated sliding indicator, breadcrumb navigation, glassmorphism navigation (frosted-glass backdrop-filter pattern), animated navigation icons with labels, multi-level accordion navigation, navigation with magnetic hover effect, neon glow navigation menu, and morphing navigation pill indicator. 13 demos are 100% pure CSS using <code>:hover</code> + <code>:focus-within</code> + <code>:checked</code> state machines — drop into any stack with zero JS dependencies. 2 use ~20-50 lines of vanilla JavaScript for sticky-scroll behaviour and pointer-tracking magnetic hover effects. All ship semantic <code><nav></code> + <code><ul></code> markup with <code>aria-current="page"</code> on the active link, <code>aria-expanded</code> on toggles, <code>aria-haspopup</code> on dropdown triggers, respect <code>prefers-reduced-motion</code>, use scoped <code>.nav-NN__*</code> class names so multiple navs coexist on the same page without style bleed, ship with 44×44px tap targets (WCAG 2.5.5), MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, WordPress, Shopify, or any other stack.
16 CSS Mobile Navigation Patterns
16 hand-coded CSS mobile navigation patterns covering every production mobile-nav use case — hamburger slide-out drawer, full-screen overlay menu, iOS-style bottom tab bar (Apple Human Interface Guidelines), morphing hamburger-to-X animation, radial fan menu, swipe-gesture sidebar (Facebook Messenger pattern), FAB speed dial navigation, tab bar with sliding indicator pill, mega-menu accordion, glassmorphism nav drawer, cyberpunk neon menu, minimal dot navigation, breadcrumb collapse for deep hierarchies, split-screen navigation, command-palette search (Cmd+K pattern), and neumorphic bottom navigation. 13 demos are 100% pure CSS using <code>:checked</code> state machines — drop into any stack with zero JS dependencies; 3 use ~40-60 lines of vanilla JavaScript for swipe gestures, dot-scrolling, and command-palette filtering. All ship 44×44px tap targets (WCAG 2.5.5), <code>aria-current="page"</code> on active links, <code>aria-expanded</code> on toggles, respect <code>prefers-reduced-motion</code>, scoped <code>.mn-NN__*</code> class names so multiple navs coexist without style bleed, MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails, plain HTML.
8 CSS Navbar Designs
8 hand-coded CSS navbar patterns covering the surfaces every site needs to handle — a responsive hamburger drawer, a mega menu with hover panels, a floating glassmorphism nav, a collapsible vertical sidebar, a sticky scroll-transforming bar, a full-screen overlay menu, a navbar with a dark-mode toggle, and a minimalist navbar with underline hover animations. Pure CSS plus scoped JS — no UI framework, semantic HTML, accessibility-first.
6 CSS Mega Menus & Dropdown Menus
6 hand-coded CSS mega-menu and dropdown layouts — luxury editorial fashion, cyberpunk terminal panel, biophilic architecture studio, Swiss-grid department store, precision outdoor gear finder, and flash-sale command center. Hover + click/tap. Copy-paste ready, accessible, mobile-friendly.
Tabs, Accordions & Content
5 collections
18 CSS Vertical Tabs
18 hand-coded CSS vertical tab designs for SaaS settings panels, documentation sidebars, product feature marketing pages, and pricing comparison layouts: pure CSS vertical tabs with zero JavaScript (checkbox-hack + radio button pattern), responsive vertical tabs (desktop → mobile accordion), vertical tabs with SVG icons and text labels, icon-only mini sidebar with tooltips (VS Code / Discord / Slack pattern), vertical tabs with sliding active-indicator bar (Radix / HeadlessUI style), Bootstrap 5 vertical tabs template, Tailwind CSS vertical tabs, vertical tabs accordion hybrid with native details/summary, settings panel vertical tabs (Stripe / Linear / Vercel / Notion SaaS admin canonical), docs sidebar vertical tabs with category groups (Docusaurus / Mintlify / Nextra / VitePress / Starlight pattern), pricing comparison vertical tabs, product feature vertical tabs (Stripe / Linear / Framer marketing page pattern), vertical tabs with :has() active state (pure CSS, Baseline Dec 2023), vertical tabs with View Transitions API panel swap, vertical tabs with native details name attribute exclusive group (Baseline Sep 2024), dark mode vertical tabs with theme toggle, glassmorphism frosted sidebar vertical tabs, and vertical tabs with full WAI-ARIA keyboard navigation (WCAG 2.2 AA reference — arrow keys / Home / End / Space / Enter). 12 Pure CSS + 6 Light JS. Every design scoped under .vt-NN prefix for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, WCAG 2.2 AA accessible, framework-agnostic (React, Vue, Svelte, Astro, Next.js, Nuxt, Remix, SvelteKit).
39 CSS Breadcrumbs
39 hand-coded CSS breadcrumbs — Schema.org BreadcrumbList Microdata + WCAG 2.2 accessible (Google Rich Results eligible), :has() responsive collapse, dark/light theme toggle with color-mix, Shopify/Amazon e-commerce filter chip removal, Vercel/Linear/Notion SaaS dashboard app-shell pattern, Docusaurus/Mintlify sticky scroll-shrink header, Amazon-style dropdown sibling menus, NFT/Web3 holographic shimmer (@property + conic-gradient), SaaS marketing gradient text, Airbnb filter chip with container queries, editorial blog wave underline, developer docs one-click path copy (Clipboard API), and 26 more. Semantic HTML: <nav aria-label='Breadcrumb'> + <ol> + aria-current='page'. Framework-agnostic, MIT-licensed.
32 CSS Accordions — Vertical & Horizontal
32 free CSS accordions covering pure-CSS FAQ blocks with details/summary, mobile navigation menus, e-commerce filter sidebars, nested tree views, exclusive single-open groups and smoothly animated height:auto — plus 26 visual variations in vertical, horizontal and hybrid layouts. Copy-paste HTML and CSS, no JavaScript.
10 CSS Sidebar Navigation Designs
Hand-coded CSS sidebar navigation patterns — collapsible rails, drawer menus with text and icons, nested vertical navigation, sidebar dropdowns, sticky full-height layouts, glassmorphic blur, mobile slide-out overlays, and bottom-pinned profile sidebars. Pure CSS, no framework, copy-paste ready.
32 CSS Tab Designs
32 hand-coded CSS tab designs for SaaS dashboards, checkout flows, docs sites, and settings panels — sliding pill (Linear/Vercel), iOS segmented (Apple HIG), VS Code file tabs, brutalist press, bento grid, CRT terminal, particle burst, drop-cap editorial, and 24 more. Every demo uses semantic HTML (real button + radio inputs), full keyboard nav, and prefers-reduced-motion guards for WCAG 2.1 SC 2.1.1 / 2.3.3 / 2.4.7 compliance. Copy-paste HTML + CSS (+ JS on the 9 measured-indicator demos), no dependencies.