CSS 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)

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Menu Preview

Menu Options

Background

Solid Background

Gradient Background

Start

End

Menu Bar Height

Menu Bar Height: 45px

Corner Radius

Radius All Corners: 10px

Border

Border Width: 0px

Border Style:

Border Color:

Fonts

Font Color:

Font Size: 16px

Font Transform:

Dropdown Icon

▾ Black Down Pointed Triangle

▿ White Down Pointed Tringle

↓ Downwards Arrow

⮟ Downwards Equilateral Arrowhead

⏷ Medium Down Triangle

+ Plus Sign

Hover Text Color

Text Color:

Hover Background

Background Color:

Fonts

Font Color:

Font Size: 16px

Font Transform:

Background

Background Color:

Hover Text Color

Text Color:

Hover Background

Background Color:

Menu Structure

Drag

Home

Delete
Drag

Products

Delete
1. Drag
  
  Products 1
  
  Delete
2. Drag
  
  Products 2
  
  Delete
3. Drag
  
  Products 3
  
  Delete
4. Drag
  
  Products 4
  
  Delete
Drag

About

Delete
Drag

Services

Delete
1. Drag
  
  Services 1
  
  Delete
2. Drag
  
  Services 2
  
  Delete
3. Drag
  
  Services 3
  
  Delete
Drag

Contact Us

Delete

Add New Menu Item

Menu Label
Menu URL

Container Color:

Instructions

To rearrange the order of the menu, grab the icon and drag to new position.
To create a submenu, grab the icon and drag the menu to the right.
To remove a submenu, grab the icon and drag the menu to the left or to new position.
Any menu item can be deleted by clicking on the red cross.
Note: If you delete a top menu that has submenus, all of the submenus will also be deleted.
To add a new menu, fill in the Menu Label and URL and click 'Add'. Menu item can then be dragged to position required.
Menu preview will update automatically.

CSS Code

HTML Code

Javascript Code

Support Us

CSS Menu Generator

Background

Menu Bar Height

Corner Radius

Border

Fonts

Dropdown Icon

Hover Text Color

Hover Background

Fonts

Background

Hover Text Color

Hover Background

Menu Structure

Add New Menu Item

Instructions

Favorites