EspañolResponsive menu generator
Enter the site name and the links, choose the colors and the breakpoint. The preview shows the menu at desktop and mobile size, and the code comes out ready to paste.
How to useA menu that becomes a hamburger on mobile
Available in: 
Responsive menu generator: what it is for
Every site needs a menu that works on desktop and mobile. This generator builds the navigation menu with your links: side by side on large screens and with a hamburger button below the breakpoint you choose.
The code follows accessibility best practices: a labeled nav element, a button with aria-expanded and aria-controls, closing with the Esc key and when a link is tapped, and an icon animation that respects the reduced-motion preference. The preview shows the result at desktop and mobile size at the same time.
How to use
- Type the site name and links.
- Choose the colors, the breakpoint and whether the last link becomes a button.
- Copy the HTML, CSS and JavaScript or download the sample page.
When to use it
- A hand-coded business website.
- A landing page without a framework.
- Replacing an old menu that doesn't work on mobile.
Frequently asked questions
Is the menu accessible?
Yes. The toggle is a button element with aria-expanded and aria-controls, the menu closes with the Esc key and when a link is clicked, and the navigation sits inside a nav element with an aria-label. It works with keyboards and screen readers.
Does it work without JavaScript?
On desktop, yes: the links are always shown. On mobile the button needs JavaScript to open, so the code only hides the links once the script loads (js class on html), and without the script they appear stacked.
Which breakpoint should I use?
For up to about five short links, 768 px works well. With more links or long names, go up to 960 or 1024 px so items don't get squeezed before turning into a hamburger.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.