Building Block

Navigation & Menus

Sticky navbars, mobile hamburger drawers, and dropdown mega menus — accessible, responsive HTML/CSS/JS patterns that Claude deploys in a single conversation. No frameworks, no CDN dependencies.

Get started — from £6.99/month All building blocks

Code Patterns

Navigation patterns

Three proven navigation patterns covering every site type. Claude generates the full markup, CSS, and vanilla JS — matched to your theme and deployed live on your server.

Pattern 1 — Sticky Top Navbar

Fixed-position navbar that gains a box-shadow and condensed padding on scroll. Logo on the left, navigation links in the centre, and a primary CTA button on the right. Fully responsive with a clean mobile breakpoint.

CSS Vanilla JS Sticky Responsive
  • position: fixed with z-index: 1000 — sits above all page content
  • JavaScript scroll event adds a .scrolled class at 60px for the shadow and reduced height
  • Logo: text or <img>, left-aligned within a max-width container
  • Nav links: inline flex with hover underline animation via ::after pseudo-element
  • CTA button: primary filled with hover colour shift
  • Mobile: links hidden at 768px, hamburger icon shown (pairs with Pattern 2)
Prompt to use with Claude

Add a sticky top navbar to my site. Logo: “[Your Brand]” as text on the left. Nav links: [Home, Features, Pricing, Contact] linking to [/home, /features, /pricing, /contact]. CTA button: “[Get started]” linking to /pricing. On scroll (60px), add a drop-shadow and slightly reduce the nav height. Brand colour: [your hex]. CSS in theme.css, JS in main.js. Mobile nav links hidden at 768px.

Pattern 2 — Mobile Hamburger Drawer

Full-height slide-in side drawer for mobile navigation. A hamburger icon in the navbar opens it, a background overlay closes it. Fully accessible with aria-expanded state management and focus trapping. Pairs with Pattern 1 or any existing navbar.

Vanilla JS Accessible Slide-in Drawer ARIA
  • Hamburger button: 3-line SVG that animates to an × on open via transform transitions
  • Drawer: position: fixed, right-aligned, 280px wide, slides in via transform: translateX()
  • Semi-transparent overlay behind the drawer — click it to close
  • aria-expanded and aria-controls attributes for full screen-reader support
  • Focus trapping: Tab cycles only within the open drawer
  • Closes on Escape key and on any nav link click
Prompt to use with Claude

Add a mobile hamburger side drawer to my site. It should open from the right side, be 280px wide, and slide in from off-screen. Include a semi-transparent overlay behind it that closes the drawer when clicked. Nav links inside the drawer: [Home, Features, Pricing, Contact] linking to [/home, /features, /pricing, /contact]. The hamburger icon appears in the top navbar at <768px. Include aria-expanded state management and Escape key close. CSS in theme.css, JS in main.js.

Pattern 3 — Dropdown Mega Menu

Desktop dropdown panels triggered on hover or focus. Each panel contains grouped links with headings and optional descriptions. Keyboard-navigable with correct aria-haspopup attributes and a :focus-within fallback for no-hover environments.

CSS Accessible Keyboard Nav Grouped Links
  • Dropdown panel positioned below trigger link using CSS :hover and :focus-within
  • Animated reveal: opacity 0→1 + translateY(-4px → 0) in 160ms
  • Panel layout: 2–4 column CSS Grid, each column with a heading and 3–5 links
  • Optional emoji or icon prefix per link group
  • aria-haspopup="true" and aria-expanded on all trigger links
  • Mobile: panels expand inline as an accordion below 768px
Prompt to use with Claude

Add a dropdown mega menu to my navbar. The “[Products]” nav link should open a dropdown panel with two columns. Column 1 heading: “[Features]” with links: [Feature A /feature-a, Feature B /feature-b, Feature C /feature-c]. Column 2 heading: “[Resources]” with links: [Getting Started /getting-started, Documentation /docs, Changelog /changelog]. Animate the panel with a fade and slide-down on open. Mobile: expand as accordion below 768px. Include aria-haspopup and aria-expanded. CSS in theme.css.

What you get

Every navigation pattern includes

Keyboard accessible

Every pattern follows WCAG 2.1 guidelines. Dropdown menus open on focus, close on Escape, and cycle logically through Tab — no mouse required.

Matched to your theme

Claude reads your existing theme.css and writes navigation that inherits your colour variables, font stack, and spacing — consistent with every other page.

No CSS frameworks

No Bootstrap, no Tailwind. Every pattern is vanilla CSS and minimal vanilla JS — faster page loads and no dependency conflicts with your existing code.

Instant iteration

Add a link, change the CTA text, adjust the mobile breakpoint. Describe the change to Claude and it’s on your live site within seconds.

More building blocks

Pair navigation with

Combine navigation patterns with these building blocks for a complete page design.

Hero Sections

Fullscreen gradient, split-layout, and animated headline hero patterns that sit directly below your sticky navbar.

View patterns →

JS Animations

Add scroll-reveal and entrance animations to any section of your page below the nav.

View patterns →

Cards & Feature Sections

Icon feature grids, stats rows, and comparison tables to fill out your page content.

View patterns →

Deploy your navigation today

From £6.99/month. First month free — no credit card required.

View pricing All building blocks