Drop-down menu

Updated: 11/30/2020 by Computer Hope

In a computer GUI, a drop-down menu is a menu that offers a list of options. The title of the menu, or the currently-selected item in the list, is always displayed. When the visible item is clicked, other items from the list "drop-down" in to view, and the user can choose from those options.

For example, many programs have a "File" drop-down menu at the top-left of their screen. Clicking the "File" text generates a new menu with additional options.

Drop-down menus in HTML

A drop-down menu is a clean method of showing a large list of choices since only one choice is displayed initially until the user activates the drop-down box. To add a drop-down menu to a web page, you would use a <select> element. The <option> element with attribute selected="selected" is the default option, displayed before the menu is opened.

Select a Choice: 
<select name="example">
 <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.

Example of the above code

Select a Choice:

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 used in all types of software. For example, in the Windows operating system, the list of possible display themes (shown below) is a drop-down menu.

Drop-down menu example in Windows

How to select a drop-down menu using the keyboard

To select a drop-down menu using the keyboard, press Tab until the drop-down menu is selected. Once selected, you can use the up and down arrow keys to scroll through the available options. For example, press Tab now until the following drop-down menu is selected and then use your down arrow key to scroll through the list. Once you're done selecting an option, press Tab again to move to the next item or press Enter.

Example:

Tip

You can also press the first letter of an option. For example, in the above drop-down menu, "Last" is the last item in the drop-down menu. If you press the "L" key on your keyboard once the drop-down menu is selected it would immediately scroll down to that option. This tip is helpful for large drop-down menus with several options (e.g., selecting a state or country).

What key do I press to close a drop-down menu?

You can press the Esc key to close the drop-down menu.

What happens when you click an item in a drop-down menu?

When an item in a drop-down menu is clicked, it becomes the selected option. For example, if you're filling out a form containing a drop-down menu with a list of countries, and you choose "United States," that becomes your selection. When you submit the form, "United States" will be the country you chose.

What icon do you click to activate a drop-down menu?

If a drop-down menu only has one option available (as seen below), you'd click the down arrow icon next to the first option.

Example:
Tip

Today, most programs also allow you to click anywhere in the drop-down menu to see the list of available options.

When writing documentation or describing a drop-down menu, use "drop-down menu" unless you're describing a function, option, or command with no hyphen.

Combo box, List box, Menu, Menu-driven, Operating system terms, Spin box