CSS Responsive Menu Generator

Generate a responsive CSS menu with this handy tool. This generator will assist you in creating a new CSS menu for your webpage. Update any properties below to visually see the changes to the menu. All code is generated automatically, just copy and paste into your project.

With Thanks: A big thank you to CSSPortal for letting us use the code to their menu generator.
⮞ Responsive menu - code generated will now be responsive.
⮞ Design your own menu - Click on Menu Design below and you'll be able to add or delete menu items from the menu.
⮞ Rearrange the order of the menu.
⮞ Added - select from different dropdown arrows for the submenus.
⮞ Download Menu - click on the icon to download your menu. (May not work in all browsers)

Live Preview

Responsive

Generated Code

Copy & paste

Everything is worked out in your browser. The preview runs in a sandbox, so it cannot affect this page.

How to use it

Design your menu with the settings below the preview, then copy the code into your own website.

Watch the previewEvery change you make is shown straight away in the Live Preview. Use the Desktop and Mobile buttons to see both layouts.
Style the barUse the Nav Bar tab for colors, gradient, height, border, shadow and the hamburger icon used on mobile.
Style the itemsTop Items and Sub Menu control text, hover colors, dropdown arrows, alignment and how submenus behave on mobile.
Edit the linksIn Menu Design, change the labels and links, add or delete items, and drag them into the order you want.
Add a logoUpload your own logo or use the placeholder, and add some text next to it if you like.
Copy the codeCopy the HTML, CSS and JavaScript into your page, or download a complete menu.html file to try it first.

Good to know

Mobile menu at 768px

On screens up to 768px wide the links collapse into a hamburger button. Collapsed submenus open when you tap their parent item.

Works with a keyboard

Dropdowns open when a link is focused, and Escape closes the mobile menu.

Check your links

Only http, https, mailto, tel and links on your own site are allowed. Replace the # placeholders with your real pages.

Frequently asked questions

Does the menu need any libraries?

No. The menu is plain HTML and CSS, plus a short piece of JavaScript for the mobile hamburger button. There is nothing to install.

Where do I put the code?

Put the HTML where you want the menu to appear, the CSS in your stylesheet (or in a <style> tag) and the JavaScript just before the closing </body> tag. The All-in-one tab shows all three together in a single page.

Can I have more than one level of submenus?

This generator makes a menu with one level of dropdown submenus under each top-level item.

Is my logo uploaded?

No. The image stays in your browser and is placed in the generated HTML as a data URL. Because of that, large images make the code very long, so the limit is 500 KB. For a live site you may prefer to replace the src with a link to the image file.

Why does the Desktop preview look like the mobile menu?

The preview is the real menu, so it follows its own responsive rules. If your screen or window is narrower than 769px, even the Desktop preview uses the mobile layout.