Navigation is the one part of a site every single visitor touches, yet it's usually the part developers rush — a plain <ul>, a media query, done. Below are 8 free navigation snippets you can preview live and copy in seconds: a mobile hamburger menu, a mega menu, a collapsible sidebar, a sticky header, a dropdown, breadcrumbs, a mobile bottom bar, and animated tabs.
Each one comes with how the effect actually works, when to reach for it, and a quick tip for customising or keeping it accessible. Navigation patterns get copy-pasted more than almost anything else in a codebase, so it's worth understanding the handful of techniques — aria-expanded toggling, scroll-position detection, layout-shift-free collapsing — that make the difference between a menu that feels solid and one that feels flaky.
Every snippet below is a live, interactive preview — click it, resize it, try it right in the article. When you find one you like, hit View / Edit Code to grab the HTML/CSS/JS or export it to React, Vue, Angular or Tailwind.
What makes navigation feel "solid"?
Before the snippets, it helps to know what separates a menu that feels reliable from one that feels flaky. Four things matter most:
- Keyboard and screen-reader parity — every open/close state should be reflected in
aria-expanded, and every interactive item reachable withTabalone. - No layout shift — sticky headers, sidebars and dropdowns should reserve their space up front so content doesn't jump when they appear.
- Cheap animation — transforms and opacity for open/close transitions, not
heightortop, which force the browser to recalculate layout on every frame. - A clear current-state indicator — the active tab, current breadcrumb, or open menu item should always be visually obvious, not just implied by colour.
Keep those four in mind as you scroll — each snippet below leans on one or more of them.
1. Hamburger Nav
A responsive nav bar that collapses into a hamburger icon on mobile, with the bars morphing into an X and the menu sliding in — the pattern behind nearly every site's mobile header.
How it works: a single toggle('open') class swap on click drives everything — CSS handles the rest. The three bars are <span> elements rotated and translated into an X with transform, and the menu panel transitions in with transform: translateX() rather than animating width or display, so it stays smooth even on low-end phones.
Best for: any responsive site's mobile header — marketing pages, blogs, dashboards. Tip: set aria-expanded on the button and move focus into the menu panel when it opens, otherwise keyboard users tab straight past a menu they can't see is open.
Grab the code: Hamburger Nav
2. Mega Menu
A full-width dropdown panel with grouped links, icons and a featured column — the navigation pattern SaaS and e-commerce sites use when one nav item hides dozens of destinations.
How it works: the trigger button carries aria-haspopup and aria-expanded, and toggling it swaps a class that reveals a full-width panel positioned with position: absolute relative to the nav bar (not the trigger), so it spans edge-to-edge. role="menubar" and role="menuitem" on the structure give screen readers the same mental model as sighted users.
Best for: product suites, marketplaces, and any site where "Products" or "Solutions" needs to fan out into a dozen links. Tip: close the panel on Escape and on click-outside — mega menus are the single most common place users get "stuck" behind an overlay they can't dismiss.
Grab the code: Mega Menu
3. Collapsible Sidebar Nav
A dashboard sidebar that collapses to icon-only width with one click, keeping labels accessible via tooltip — the exact layout behind Notion, Linear and most admin panels.
How it works: the collapse button flips a class on the sidebar that animates its width via a CSS transition and simultaneously fades the text labels with opacity, so icons stay aligned while labels disappear. aria-expanded on the toggle button keeps assistive tech in sync with the visual state.
Best for: dashboards, admin tools, and any app where screen real estate matters more once a user is a returning power user. Tip: persist the collapsed/expanded state in localStorage so the sidebar doesn't reset every time the user reloads the page.
Grab the code: Collapsible Sidebar Nav
4. Sticky Header
A header that shrinks and gains a shadow once you scroll past the hero, so navigation stays reachable without permanently eating vertical space.
How it works: position: sticky keeps the header pinned to the top of the viewport with zero JavaScript for the pinning itself. A small scroll listener checks window.scrollY against a threshold and toggles a "scrolled" class that shrinks the header's padding and adds a box-shadow — both cheap, transform-friendly changes rather than anything that reflows the page.
Best for: long marketing pages, docs sites, and blogs where users need the nav available at any scroll depth. Tip: throttle the scroll listener (or use an IntersectionObserver on a sentinel element instead) so it doesn't fire on every single scroll event.
Grab the code: Sticky Header
5. Dropdown Menu
A clean account-menu dropdown with icons, a chevron that rotates on open, and a click-outside-to-close behaviour — the small utility every app header needs at least once.
How it works: the trigger toggles an open class on its parent, which a sibling-selector rule (.dropdown.open .menu) uses to reveal the panel with a short opacity and transform: translateY() transition — no JavaScript animation library needed. The chevron icon rotates 180° using the same class toggle.
Best for: account menus, settings menus, and any "one trigger, a handful of actions" pattern in an app header. Tip: add a document-level click listener that closes the menu when the click target is outside it — without that, dropdowns are the top source of "stuck open" bug reports.
Grab the code: Dropdown Menu
6. Breadcrumb
A minimal, semantic breadcrumb trail — the small navigation piece that tells users (and Google) exactly where a page sits in your site hierarchy.
How it works: it's an ordered list (<ol>) inside a <nav aria-label="Breadcrumb">, with CSS pseudo-elements (::before) drawing the separator between items so the markup itself stays clean text and links — no stray separator characters cluttering a screen reader's output. The final item gets aria-current="page" instead of a link.
Best for: e-commerce category pages, docs, and any deep site structure where users need to jump back up a level. SEO note: pair the visible trail with BreadcrumbList structured data — that's what turns it into the breadcrumb rich result under your listing in Google search.
Grab the code: Breadcrumb
7. Mobile Bottom Nav
A fixed, app-style bottom tab bar with an active-state indicator that swaps content panels instantly — the pattern that makes a mobile web page feel like a native app.
How it works: the bar sits fixed to the viewport bottom with position: fixed and a safe-area inset so it clears the home-indicator strip on iOS. Tapping a tab toggles an active class on both the tab and its matching content panel, swapping display instantly rather than routing to a new page — the same trick single-page apps use for instant tab switches.
Best for: PWAs, mobile-first web apps, and any site that wants its mobile experience to feel closer to a native app than a shrunk desktop layout. Tip: keep it to four or five tabs max — past that, thumbs start missing targets and the bar stops feeling instant.
Grab the code: Mobile Bottom Nav
8. Animated Tabs with Indicator
A tab bar where a highlight pill glides smoothly to the active tab instead of just jumping, plus panel content that crossfades in — a small detail that makes a tabbed UI feel considerably more polished.
How it works: on click, the script reads the clicked tab's offsetLeft and offsetWidth via getBoundingClientRect()-style measurement, then applies those values to the indicator element as transform: translateX() and width with a CSS transition — so the pill "travels" between tabs instead of teleporting. The panel swap uses a short opacity crossfade rather than an abrupt cut.
Best for: settings pages, product feature tours, and any UI with three to six related views. Tip: recalculate the indicator's position on window resize, not just on click — otherwise a responsive layout leaves the pill stranded under the wrong tab after the viewport changes.
Grab the code: Animated Tabs with Indicator
How to drop these into your project
Every snippet is framework-agnostic, so the workflow is the same wherever you're building:
- Open the snippet and hit View / Edit Code to see the HTML, CSS and JS in separate tabs.
- Paste the HTML into your markup, the CSS into your stylesheet, and the JS (if any) before your closing
</body>tag. - Prefer a component? Use the one-click export to React, Vue, Angular or Tailwind and drop the file straight into your app.
- Recolour to your brand by editing the accent colour, spacing and font variables at the top of each snippet.
Keep your navigation accessible
Navigation is the part of a site keyboard and screen-reader users depend on most. Three rules cover almost every case:
- Toggle
aria-expandedon every open/close trigger — menus, dropdowns and sidebars all need it to announce their state correctly. - Make sure every menu, dropdown and tab bar is fully operable with
Tab,EnterandEscapealone — mouse-only interactions lock out keyboard users entirely. - Use real landmark elements (
<nav>,<ol>,role="menubar") so assistive tech can jump straight to navigation instead of reading through it line by line.
Final Thought
These are just 8 of dozens of navigation patterns you can copy for free — no login, no sign-up, everything runs in your browser. The techniques underneath them — class-toggled state paired with CSS transitions, scroll-position detection, measured-and-transformed indicators, and semantic landmark markup — are the same building blocks behind every menu, tab bar and sidebar you'll ever build. Learn them once here and you'll reach for them on every project.
Preview any of them live, tweak the code, and export to your framework of choice in one click. Browse the full collection at FWD Tools UI Snippets — Navigation — it's free and runs entirely in your browser.
