31 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.
Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS
ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link
15 Tailwind CSS Navigation Menus
15 hand-coded Tailwind CSS navigation menus for site headers, documentation bars, admin dashboards, portfolios and mobile apps. Covers animated hover-underline navbars, hover and keyboard-accessible dropdowns, mega menus, slide-out hamburger drawers, full-screen overlay menus, shrink-on-scroll sticky headers, collapsible icon-rail sidebars, sliding tab indicators, breadcrumb styles, glassmorphism bars, mobile bottom docks, multi-level accordion sidebars, magnetic hover links, neon glow bars and spring-animated pill indicators.
17 Tailwind CSS Side Menus
17 hand-coded Tailwind CSS side menus for app shells, documentation sites, admin dashboards and mobile navigation. Covers slide-in drawers with animated hamburgers, blurred backdrop overlays, off-canvas push layouts, hover-expand icon rails, sticky full-height sidebars, nested accordion trees, neumorphism and glassmorphism surfaces, cyberpunk neon and brutalist styles, checkbox-hack and toggle-button collapse with no JS, and a macOS glass dock with a sliding highlight.
25 Tailwind CSS Sticky Navigations
250-540 chars. Let me trim.\n\n25 hand-coded Tailwind CSS sticky navigations for SaaS headers, documentation sites, e-commerce storefronts and mobile apps. Covers no-JS sticky navbars, flexbox three-zone headers, hamburger drawers, floating glass pills with backdrop blur, shrink-on-scroll and hide-on-scroll headers, transparent-to-solid hero bars, reading progress indicators, mega menus, storefront search with cart badges, scrollspy pills and mobile bottom tabs.
20 Tailwind CSS Mega Menus
20 hand-coded Tailwind CSS mega menus for site headers, documentation bars, e-commerce department navigation, SaaS dashboards and editorial mastheads. Covers focus-within panels, hover-intent delays, safe-triangle tracking, subgrid columns, viewport edge positioning, Escape-to-dismiss with focus return, arrow-key navigation, ARIA disclosure semantics, @starting-style animations, featured article images and product-finder filters.
16 Tailwind CSS Mobile Navbars & Menus
16 hand-coded Tailwind CSS mobile navigation components for app bottom tabs, hamburger drawers, full-screen overlay menus, FABs and command palettes. Covers slide-out drawers, clip-path reveal menus, iOS frosted tab bars, radial FAB fan-outs, swipeable sidebars, speed-dial menus, sliding-pill indicators, glassmorphism and neon overlays, swipe carousels, collapsible breadcrumbs and Cmd+K palettes.
11 Tailwind CSS Glassmorphic Navbars
11 hand-coded Tailwind CSS glassmorphic sticky navbars for SaaS landing pages, portfolios, dark-mode cyberpunk sites and Next.js App Router apps. Covers floating frosted-glass headers over gradient heroes, transparent bars that frost on scroll, neon-glow smoked glass, detached floating pill navbars, glass mega menus and dropdowns, hamburger off-canvas drawers, zero-JS backdrop-blur sticky headers, animated conic-gradient borders, WCAG AA accessible fills and Framer Motion React headers.
20 Tailwind CSS Sidebars
Sidebar navigation patterns for admin dashboards, chat and messaging apps, docs sites, and app shells: an accessible ARIA nav reference, focus trap with restore-on-close, inert background content behind drawers, collapsible icon rails announcing expanded state, roving tabindex, persisted collapse across reloads, overscroll containment, nested details/summary submenus, keyboard-resizable and responsive drawers, sticky full-height layouts, footer pinning, and current-page state.
20 Tailwind CSS Responsive Navbars
20 Tailwind CSS responsive navbars spanning frosted glassmorphism sticky bars, three-column mega menus, off-canvas sidebar and vertical rail drawers, animated underline tabs, floating glass pills and multi-segment islands, scroll-aware shrink headers, neon dark chrome, split two-tone and centered-logo layouts, iOS-style bottom tab bars, full-screen overlay menus, morphing search fields, breadcrumb progress and step wizard headers, dual announcement stacks, and IntersectionObserver scroll-spy highlights.
22 Tailwind Dropdown Menus
22 Tailwind dropdown menus for site navigation, mega menus, and app UI — hover slide-downs, clip-path and 3D-flip reveals, glassmorphism and staggered panels, four-column and split-screen mega menus, zero-JS <code><details></code> builds, nested multi-level flyouts, command palettes, and custom selects. Scoped under <code>.tdd-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
28 Tailwind Hamburger Menus
28 Tailwind hamburger menus for mobile navigation, app drawers, and responsive navbars. Covers slide-in off-canvas drawers with dimmed backdrops, checkbox-hack and :has() menus with no JavaScript, animated 3-line to X icon morphs, full-screen overlays, push-page content shifts, slide-out sidebars, glassmorphism blur panels, native details accordions, bottom nav bars, and breakpoint-driven navbar toggles. Accessible, keyboard-navigable, copy-paste ready.
24 Tailwind Liquid Glass Navbars
iOS 26 floating tab bars, macOS Tahoe menu strips, visionOS frosted slabs, and Dynamic Island morphing pills — 24 Tailwind navigation bars built on the liquid glass look. Covers sticky scroll-to-frost headers, SVG refraction toolbars, sliding capsule tab bars with group-has, responsive burger menus, container-query sidebars that fold to bottom tabs, plus light/dark, high-contrast, and fallback-first variants. Semantic HTML, backdrop-filter, copy-paste ready.
20 CSS Mega Menus
20 hand-coded CSS mega menus covering hover-intent delay, the safe-triangle problem, multi-column grid panels, viewport-edge collision, full-bleed panels inside a constrained header, keyboard access with Escape, correct disclosure ARIA, touch double-tap, shared swap panels, and mobile collapse. Copy-paste ready, accessible, framework-agnostic.
20 CSS Sidebar Navigation
20 hand-coded CSS sidebar navigation patterns covering the accessible ARIA reference build with aria-current and aria-expanded, focus trapping and restoring focus to the trigger on close, inert background content behind a drawer, why navigation is not a tab list, announcing collapsed and expanded state, roving tabindex for keyboard navigation, persisting collapse state across reloads, scroll containment with overscroll-behavior, nested submenu keyboard and screen reader behavior, a resizable sidebar with a keyboard accessible handle, plus checkbox collapse, responsive breakpoint behavior, icon rails, current page state, disclosure menus, details and summary accordions, sticky layout mechanics, stacking order, off-canvas drawers and footer pinning. 12 demos are pure CSS; 8 use vanilla JavaScript.
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 Navigations
25 hand-coded CSS sticky navigation headers for marketing sites, app shells, documentation and storefronts. Covers position:sticky bars, flexbox logo-links-CTA layouts, hamburger toggles, shrink-on-scroll compaction, hide-and-reveal on direction, transparent-to-solid hero headers, reading progress bars, underline-slide indicators, mega menus, scrollspy, sticky tables of contents and mobile bottom tab bars.
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
iOS 26 floating tab bars, macOS Tahoe menu strips, and visionOS glass panels recreated in pure CSS — 24 liquid glass navigation bars. Covers scroll-to-frost sticky headers, SVG refraction toolbars, sliding capsule active tabs with no JavaScript, Dynamic Island morphing pills, reflective sidebars, cursor-warp interactive navs, and responsive sidebar-to-bottom-tab layouts, plus light/dark, high-contrast, Firefox-fallback, and performance-tuned variants. Semantic HTML, backdrop-filter, copy-paste ready.
17 CSS Side Menus
17 hand-coded CSS side menus for app shells, documentation sites, admin dashboards, and mobile navigation. Covers pure-CSS slide-in drawers, frosted-glass overlay and glassmorphism panels, off-canvas push layouts, hover-expand icon rails, sticky full-height columns, multi-level accordion trees, flexbox spacing, neumorphic inset surfaces, cyberpunk neon and brutalist border styles, checkbox-hack and hover-triggered toggles, collapsible width transitions, and a macOS-style glass dock.
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 Navbars
Responsive CSS navbars covering frosted glassmorphism sticky bars, full-width mega menu dropdowns, off-canvas sidebar drawers, animated underline tabs, pill highlight links, scroll-aware shrink headers, breadcrumb reading-progress bars, split two-tone layouts, mobile bottom tab bars, centered-logo agency headers, full-screen overlay menus, morphing search fields, floating segment islands, step-wizard progress headers, and IntersectionObserver scroll-spy highlights.
15 CSS Navigation Menus
15 hand-coded CSS navigation menus for site headers, documentation bars, mobile apps, admin dashboards and SaaS marketing sites. Covers hover-underline horizontal navbars, checkbox-hack dropdowns, full-width mega menus, slide-out hamburger drawers, full-screen overlay navigation, shrink-on-scroll sticky headers, collapsible icon sidebars, sliding tab indicators, breadcrumb styles, glassmorphism bars, animated bottom-dock icons, multi-level accordion menus, magnetic hover links, neon glow bars and morphing pill indicators.
16 CSS Mobile Navigation Patterns
16 hand-coded CSS mobile navigation patterns for app bottom bars, e-commerce drawers, onboarding carousels and command palettes. Covers hamburger slide-out drawers, circular clip-path full-screen overlays, iOS bottom tab bars, morphing hamburger-to-X icons, radial FAB fan-outs, swipe-gesture sidebars, speed-dial stacks, sliding-pill tab indicators, accordion mega menus, glassmorphism and neumorphic bars, cyberpunk neon overlays, dot carousels, collapsible breadcrumbs, split-screen rails and Spotlight-style search.
32 Tailwind CSS Accordions — Vertical & Horizontal
32 hand-coded Tailwind CSS accordions for pricing-page FAQs, mobile navigation menus, product filter sidebars, documentation trees and product changelogs. Covers native details and summary disclosure, smooth height transitions, exclusive single-open behavior, rotating chevron and plus-minus icons, nested tree views, numbered onboarding steps, circular progress rings, timelines, 3D paper folds, and horizontal accordions from image galleries and feature sections to album shelves and cinematic film strips.
32 Tailwind CSS Tabs
32 hand-coded Tailwind CSS tabs for documentation sites, SaaS dashboards, settings panels, mobile app shells and type specimens. Covers sliding underline and SVG-drawn indicators, iOS segmented controls, VS Code file tabs, vertical timeline tabs, sliding pill and icon tabs, bento card tabs, bottom navigation bars, variable font-weight contrast, and expressive print styles from Bauhaus color blocks to risograph and stencil plates.
39 Tailwind CSS Breadcrumbs
39 Tailwind CSS breadcrumb trails for e-commerce faceted navigation, docs sites, multi-step checkout wizards, marketplace filters, and dashboards. Includes schema.org Microdata trails, collapsing container-query bars, removable filter chips, dropdown sibling menus, clip-path arrow and chevron shapes, glassmorphism and neumorphic pills, gradient-text and animated underline links, isometric layered tiles, truncated mobile trails, and numbered step indicators. Light and dark themes, keyboard-accessible, semantic markup.
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.
32 CSS Tabs
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.