Dropdown Menu

Sometimes referred to as a pull-down menu, drop-down list, or drop-down box, a dropdown menu is a list of items that appear when clicking on a button or text selection. For example, many programs have a "File" drop down menu at the top left of their screen. Clicking on the "File" text generates a new menu with additional options.

Drop-down menus in HTML

A drop down menu can make it easier to display a large list of choices - since only one choice is displayed initially, the remaining choices are shown when the user activates the drop box. To add a drop box to a web page, you would use a <select> element. The first <option> tag within the select element needs to have the selected option set to the value of selected, as shown in the code below.

Select a Choice:
<select name="example" id="s">
<option selected="selected" value="one">Choice 1</option>
<option value="two">Choice 2</option>
<option value="three">Choice 3</option>
</select>

In this example, we have also assigned a value to each of these options. These values can be passed to any server side script for information to be logged or for actions to occur based on the values.

Using the code above yields this result:

Select a Choice:

Form tip: If a form is asking you to select your state in a drop-down menu, you can move to it quickly by pressing the first letter of your state. For example, if you live in Utah press "u" to scroll down to Utah without having to scroll down using the mouse.

Note: Nothing happens when selecting a choice using the above drop-down menu. If you want to submit data using a drop-down menu you can use our customer service form.

Drop-down menus in a program window

Drop down menus are also used in software. For example, in the Windows operating system they are used to make a selection from a group of options, such as what display theme to use, as shown below.

Drop down menu example in Windows

Related pages

Also see: Combo box, Menu, Menu-driven, Spin box