Use the viewport controls to check responsive behavior, then copy the implementation that fits your stack.
6 patterns
Simple navbar
A compact brand and navigation row for small sites.
simpleresponsive
Accessibility
Uses a labelled nav landmark and list semantics.
Interactive controls have visible focus and explicit expanded state.
Responsive behaviour
Collapses below 620px.
Menu remains usable with keyboard and touch input.
Navbar with CTA
Primary navigation with a distinct conversion action.
marketingcta
Accessibility
Uses a labelled nav landmark and list semantics.
Interactive controls have visible focus and explicit expanded state.
Responsive behaviour
Collapses below 620px.
Menu remains usable with keyboard and touch input.
Centered navigation
Balanced navigation with centered links and an end action.
centeredmarketing
Accessibility
Uses a labelled nav landmark and list semantics.
Interactive controls have visible focus and explicit expanded state.
Responsive behaviour
Collapses below 620px.
Menu remains usable with keyboard and touch input.
Responsive mobile navbar
A mobile-first menu with explicit open and closed states.
mobilemenu
Accessibility
Uses a labelled nav landmark and list semantics.
Interactive controls have visible focus and explicit expanded state.
Responsive behaviour
Collapses below 620px.
Menu remains usable with keyboard and touch input.
Transparent hero navbar
A high-contrast navigation bar for dark hero sections.
herodark
Accessibility
Uses a labelled nav landmark and list semantics.
Interactive controls have visible focus and explicit expanded state.
Responsive behaviour
Collapses below 620px.
Menu remains usable with keyboard and touch input.
Dashboard navbar
An application header with workspace context and account action.
dashboardapp
Accessibility
Uses a labelled nav landmark and list semantics.
Interactive controls have visible focus and explicit expanded state.
Responsive behaviour
Collapses below 620px.
Menu remains usable with keyboard and touch input.
Implementation notes
These examples use plain CSS and no external dependencies. Replace sample content and destinations while preserving the semantic structure, labels, focus treatment and responsive behavior.