8 Navigation
Every collection tagged “navigation” — each one a set of hand-coded demos with copy-paste code and a live preview.
Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS
ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link
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.
17 CSS Dashboard Layouts
17 hand-coded CSS dashboard layouts for SaaS admin panels, analytics consoles, e-commerce merchant dashboards and AI copilot apps. Covers CSS Grid bento boards, collapsible icon-rail sidebars, auto-fit KPI card grids, split-pane master-detail views, fixed-header independent scroll panels, grid-template-areas shells, off-canvas mobile drawers, container-query responsive cards, dark mode CSS variable tokens, multi-level nested navigation, sticky-header data tables, masonry column packing, full-screen 100vh consoles and top-nav 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).
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.
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 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.
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.
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.