What is a drop down menu?
As the name suggests, a drop down menu is a type of menu that hides all available options until it is clicked (or tapped). In some cases, the first item on the list is always displayed.
If you wish to gain a more in-depth understanding of this concept, check out the FAQ section below:
Question #1: What is the purpose of a drop down menu?
Just like any other type of menu, the main purpose of a drop down menu is to present the user with a set of options.
In addition to this, however, a drop down menu also helps keep the layout of a web page or app neat by keeping all the available options hidden until the user is ready to access them.
Check this helpful article from Computer Hope to learn more about the purpose of this type of menu.
Question #2: What are the different types of drop down menus?
There are two basic types of drop down menus:
- Navigation
- Form
Let us take a closer look at each one:
As the name suggests, a navigation drop down menu can be found in the main navigation bar of a website. It is typically presented as a button labelled with the name of a category (e.g., Products) and is expanded by hovering over or clicking/tapping the button.
In the example above, a drop down menu labelled ‘Products’ on a gadget website might have the following options under it:
- Smartphones
- Tablets
- Laptops
- Desktops
A form drop down menu, on the other hand, is the type you see when you are filling out online forms and are given a set of predetermined options, such as:
- A list of countries
- A list of cities
- A list of payment options
Question #3: What are the benefits of using it?
Their benefits of using a drop down menu can be grouped into two basic categories:
- Aesthetic
- Functional
Let us take a look at each one in more detail:
First, as we have seen earlier, it can help keep a web page or app screen clutter free because instead of displaying all available menu options at once, it is designed to hide everything—in some cases, except for one—until the user is ready to see them.
Another benefit of using it is that it allows you to present the user only with options that are available, eliminating the risk of invalid entries that may cause issues and hinder the user from accomplishing what they are trying to do.
For example, if you are running an online store and want to ensure that all customers enter the correct shipping address, then you could use a drop down menu to present them with valid city names to choose from instead of letting them manually type one in.
Question #4: What are the downsides when using this type of menu?
One major downside to using a drop down menu is that if poorly executed, it can not only cause frustration, but also create a poor overall user experience.
For example, navigation drop down menus that are designed to expand whenever the user hovers over them can be annoying, not only for mobile users who cannot actually hover, but for desktop users as well because small movements of the mouse pointer can cause the drop down menu to close.
Another example would be a form drop down menu with too many options, such as a country selection menu. As a general rule, drop down menus are perfect for when you have at least five but no more than 10 options. When you have fewer than five or more than 10 options, it is better to choose a different menu execution.
Alternatives you can explore include:
- Radio buttons
- Autocomplete form fields
- Tick boxes