A hamburger navigation menu is the three-line (☰) icon that hides and reveals a site's navigation links on small screens. It is one of the most searched-for UI patterns in web development — every mobile website, app, portfolio, and SaaS product eventually needs one (or a bottom nav bar instead).

This snippet gives you a complete, production-ready hamburger nav in plain HTML and CSS. There is no JavaScript library, no framework, no npm install. Paste it into any project — static site, WordPress theme, HTML template, or web app — and it works immediately.

What this hamburger nav includes

The component has three parts: a fixed top bar with a brand name and hamburger button, a horizontal desktop menu, and a vertical mobile dropdown that slides open when the icon is tapped. The header uses backdrop-filter: blur(12px) over a semi-transparent dark background, giving it a frosted-glass effect similar to macOS navigation bars.

The hamburger icon is built from three <span> elements styled as horizontal bars (the standalone animated hamburger covers just this icon morph). When the .active class is toggled, the first bar rotates 45° and shifts down, the middle bar fades out with opacity: 0, and the third bar rotates −45° and shifts up — together forming a clean X. All three transforms happen simultaneously with a 300ms CSS transition, so the animation is smooth and requires zero JavaScript beyond a single classList.toggle call inline in the HTML.

How the responsive behaviour works

On screens wider than 600px the hamburger button is hidden (display: none) and the menu links sit in a horizontal flex row in the header. Below 600px the horizontal menu is hidden and the hamburger button appears. Tapping the button adds the .open class to the <ul>, switching it from display: none to display: flex with a vertical column layout — creating a full-width dropdown below the header bar. For an off-canvas panel instead, swap in the side drawer.

To change the breakpoint, find @media (max-width: 600px) in the CSS panel and update the pixel value to match your project's grid system.

Customising colours and fonts

Open the CSS panel and update the colour values directly. The nav background is rgba(15,23,42,0.85) — change the alpha to make it more or less transparent. The link colour is #94a3b8; hover state switches to #f1f5f9 on a #334155 background pill. Font size is 14px with font-weight: 500. All of these are easily updated to match your design tokens or brand palette. Every edit refreshes the preview in real time — no save or run step needed.

Fixed positioning and z-index

The nav uses position: fixed with top: 0, left: 0, right: 0 and z-index: 100. This keeps it pinned to the top of the viewport as the user scrolls. If your layout already has a fixed element at a higher z-index, increase the nav's z-index value accordingly. The page content should have padding-top: 60px (the nav height) to prevent overlap — add that to your body or main wrapper CSS.

Accessibility notes

The hamburger <button> element is keyboard-focusable by default. For a production site, add aria-expanded and aria-controls attributes to the button and an id on the menu <ul> so screen readers can announce the open/closed state. You can also add aria-label="Toggle navigation" to the button so it has a meaningful accessible name. These additions take under two minutes and significantly improve usability for assistive technology users.

Saving your customised version

After editing the snippet to match your project, click "Save as" in the editor header, type a name like "My Site Nav", and press Enter. The version saves to your browser's IndexedDB and appears in the Saved tab in the sidebar. Connect GitHub Gist via the GitHub button in the header to back it up and restore it on any device.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to work out every selector interaction by hand. Paste this snippet's HTML and CSS into an AI coding assistant like Claude and ask it to explain exactly how the three nth-child span selectors combine with the single classList.toggle call to turn the hamburger into an X, or why the mobile menu relies on toggling display between none and flex instead of an animated height or transform. The same assistant is useful for optimizing it — ask whether the inline onclick attribute should move to an addEventListener call for cleaner separation of concerns, and whether the blur-heavy backdrop-filter header could cost paint performance on lower-end devices while scrolling. It's just as useful for extending the nav: ask it to add aria-expanded state syncing for accessibility, animate the dropdown open with a max-height transition instead of a hard display swap, or add a scroll-triggered background opacity change. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a responsive hamburger navigation bar in plain HTML and CSS, with at most one line of JavaScript — no framework, no external icon library.

Requirements:
- A fixed-position top nav bar with a brand name on the left and a horizontal list of links on the right, visible above a 600px breakpoint.
- Below 600px, hide the horizontal link list and show a hamburger button built from exactly three stacked span elements styled as horizontal bars via CSS (no image, no icon font).
- Clicking the button must toggle an "active" class on the button and an "open" class on the menu list using nothing more than classList.toggle calls.
- When the button has the active class, use CSS transforms and nth-child selectors so the first bar rotates 45 degrees and translates down to meet the third bar (which rotates -45 degrees and translates up), and the middle bar fades to opacity 0 — forming a clean X, all animated with a shared CSS transition on transform and opacity.
- When the menu has the open class, switch its display from none to a full-width vertical flex column positioned directly below the fixed header, so it reads as a dropdown panel.
- Give the header a translucent dark background with backdrop-filter blur so content scrolling underneath it is visibly frosted.
- Keep the whole toggle mechanism to a single inline classList.toggle call (or an equivalent one-line handler) rather than a larger script file.

Step by step

How to Use

1
Open the snippetClick "Hamburger Nav" in the sidebar Library tab. The HTML and CSS panels load instantly and the preview shows the nav at desktop width.
2
Test the mobile toggleClick the phone icon (375px) in the preview header. The hamburger button appears. Click it in the preview to see the X animation and dropdown open.
3
Edit colours and breakpointIn the CSS panel, update the background colour, link colours, and the max-width: 600px media query value to match your project. The preview refreshes as you type.
4
Update the nav linksIn the HTML panel, change the <li><a href="#">…</a></li> items to your actual page names and URLs. Add or remove list items as needed.
5
Copy or downloadClick "Copy all" in the header to copy HTML + CSS as a single block for pasting into your project, or "Download" to save a standalone HTML file.
6
Save your versionClick "Save as", type a name, and press Enter. Your edited nav saves to IndexedDB and appears in the Saved tab for future sessions.

Real-world uses

Common Use Cases

Drop into any HTML project

Copy the code and paste it at the top of your HTML file. No dependencies, no configuration — the nav works immediately in any browser.

Learn CSS transforms and transitions

The X animation uses translateY and rotate on :nth-child selectors. Edit the values and watch the preview to understand exactly how each transform works.

Prototype a mobile layout

Use the snippet as a starting point for any mobile-first prototype. Switch to the 375px preview, test the toggle, and iterate on the layout in minutes.

Match your brand

Update the background colour, blur amount, link colours, font, and spacing in the CSS panel to align the nav with your design system. Save under a custom name.

Add accessibility attributes

Practice adding aria-expanded, aria-controls, and aria-label to the burger button. Edit the HTML in the panel and verify the structure with screen reader tools.

Migrate to React or Vue

Use the JSX or Tailwind export to get a framework-ready starting point. Replace the inline onclick with a useState toggle and the CSS with Tailwind utility classes.

Got questions?

Frequently Asked Questions

A hamburger navigation menu is a UI pattern where the site's navigation links are hidden behind a three-line (☰) icon on small screens. Tapping the icon reveals the links in a dropdown or slide-in panel. It saves screen space on mobile without removing navigation from the page.

Barely — just one classList.toggle call inline in the HTML button's onclick attribute. There is no external JS file, no library, and no framework. If you want zero JavaScript, you can replicate the toggle using a hidden checkbox and the CSS :checked selector instead.

The three span bars inside the button each have a CSS transition on transform and opacity. When the .active class is added, the first span rotates 45° and moves down 7px, the middle span fades to opacity: 0, and the third span rotates −45° and moves up 7px — forming an X shape. Removing .active reverses all three transitions.

Find @media (max-width: 600px) in the CSS panel and change 600px to your preferred breakpoint — for example 768px for tablet or 480px for small phones only. The burger button and dropdown are hidden on wider screens via the matching display: none rules outside the media query.

In the HTML panel, add a new list item inside the ul.menu element — for example: li > a href="/your-page/" > Page Name. Each item inherits the existing link styles automatically. Remove items the same way — just delete the li line.

backdrop-filter: blur(12px) blurs the content behind the nav bar, creating a frosted-glass effect. It requires the nav background to have an alpha value below 1 — here it's rgba(15,23,42,0.85). The effect is supported in all modern browsers. For older browsers, the nav falls back to a solid dark background.

Yes. The HTML panel shows JSX-ready code via the "React / JSX" block at the bottom of the page. For Vue or Svelte, the HTML and CSS paste directly into a .vue or .svelte component file. Move the inline onclick to a component method and the CSS to a style block.

Add aria-expanded="false" to the button element and toggle it to "true" when the menu opens. Add aria-controls="menu" to point to the ul with id="menu". Add aria-label="Toggle navigation" so screen readers announce the button's purpose. These attributes make the nav fully usable for keyboard and screen reader users.

Loading…