Drop Down Menu Generator

Create custom vertical or horizontal drop down menu for free. Simple HTML/CSS/JS multi-level Menu for your website.

We have detected that JavaScript is disabled in your browser, so this menu generator will not function properly. JavaScript support is required for the Drop Down Menu Generator to work properly. Please enable javascript in your browser settings and then refresh this page to enjoy the full functionality of the drop-down menu generator.

[ Reset ]Restore default settings

Settings

Choose whether menu items should appear next to each other (horizontal) or one below the other (vertical)

Display:

Choose whether the drop-down parts of the menu should expand when you click them with the mouse or just hover over them.

Expanding a menu in which "display" is set to "vertical" and combined with "Drop-down method" set to "hover" may be inconvenient for the user. We do not recommend combining these settings in this way.

Drop-down method:

Select font family and size

Font:

Font family px Font size

Choose border style and width

Border:

Border style px Border width

Set the space between the beginning of each menu element and the point where it's text string begins

Item padding:

X:px Horizontal padding Y:px Vertical padding

Set colors for the menu

Colors:

Menu background color BG Background color of hovered items and submenus BG:hov Active element background BG:act Border color Border

Font color Fnt Font color of hovered items and submenus Fnt:hov Active element's font color Fnt:act

Decide what "expand arrow" will be shown next to drop down items

Drop down arrow:

No arrow

Should the edges of your menu be rounded?

Rounding the edges:

Responsive mode only matters when the "display" is set to "horizontal". The effect is that under normal conditions the menu is displayed horizontally, but when it does not fit (e.g. on smaller screens) it switches to vertical mode

Responsive mode:

This setting only matters when the "display" option is set to "horizontal". If enabled, your horizontal menu items will have equal width and will be evenly spaced to cover the entire width of the menu bar

Equal elements:

Load

From browser

From file

Save

In the browser

On the disk

Your menu is empty

Menu builder

New Item PreviewYour menu is empty CodeYour menu is empty ClearYour menu is empty Guide

Text:

Replace icon

Remove icon

Enter the text of this element

Tooltip: Tooltip that will be displayed when you hover the mouse over this element

Type: The Type of element determines what will happen when it is clicked. The Link will redirect the user to the specified page, Dropdown will expand the element and show its child items, and the Function will fire the javascript function you define

Link: Enter the URL to which this item should link.

Drop-down items can contain child items.

Function:

javascript:(function(){

})()

Type the inline javascript function that will be executed when this item is clicked

AddThe element must have some text!