Dropdown Menus: Best Use Cases

What Makes a Good Dropdown Menu

Well designed and developed dropdown menus have key traits. If you’re considering developing dropdown menus on your website or next redesign, keep these considerations in mind:

1. 1. Keep dropdown options no less than 7 and no more than 15.
      Too few options make the dropdown a bit useless, and too many dropdowns confuse and frustrate users. Dropdown menus that are long or over detailed are cumbersome to users, especially if it stretches down the screen and requires scrolling (which also may require extra code to make it functional on hover menus). Mobile experiences, too, can be hindered quickly by dropdown menus that are over detailed. This applies not only for navigation dropdowns, but forms, too. If more than 15 items are impossible to avoid in a form dropdown, give users an option to input text to find what they want, like when instructing users to choose a country.
   2. Stay under two levels deep.
      Similar to the guideline above, navigations that keep building out make for poor use of the screen and get more difficult for users. Whether the dropdown accordions fly-out on hover or click, it requires careful control by users to keep options open. This can be frustrating and complicated, especially when considering accessible access for all users. Instead of investing in deep accordion dropdowns, consider a better internal site search so users can find what they’re looking for with ease. Or, simplify your navigation to top-level categories and topics that make sense to your end user and their goals.

1. 1. Unavailable options aren’t visible, or are grayed out.
      Whether it’s in your navigation or on a form, Nielsen Norman Group recommends keeping unavailable options out of view by graying them out.As seen above with the Mazda website example, graying out unselected items (or highlighting the selected) is a helpful visual for users to know where their mouse is and what option they may be about to click. Similarly, if you’re giving users options on a form — such a an ecommerce or retail site with options for products — gray out anything that’s unavailable or is not in stock.
   2. Function by click, not hover.
      Hover dropdowns are particularly tricky for users, whether using a mouse on a desktop, or a clickpad on a laptop. They require people to hold their mouse steady. And if you’re breaking guideline number 2 above, it’s even more difficult to navigate effectively. A click-activated dropdown keeps the control in the users hands, while still giving them the ability to browse the options before making their next selection.

1. 1. Design for users, accessibility, and space.
      This includes not only highlighting options when selected or hovered on a dropdown menu, but making sure the menu and navigation itself can be easily read. Contrast ratios are a must for accessibility, but even more important if you’re giving users many options to choose from. Consider simple colors with nice contrast, and keep the verbiage used in your dropdown as simple but direct as possible to avoid access clutter, which can add to user confusion. Also, consider padding around options to give open space and make it easy for users to digest the options available in front of them.

1. Develop dropdown menus for mobile first.
   As mobile use continues to climb over desktop, it’s vital that any dropdown menu on a desktop is equally easy to use on a mobile device, though it likely won’t function or display the same. That’s why keeping your options light, activating with click, and avoiding multiple displayed subnavigations are good practice. According to Think with Google, mobile users are constantly engaged on their devices, from communicating on social media to creating micromoments, like finding directions or hours of operation for a local business. When a question arises, 96% of those surveyed by Google said they turn to their smartphones. Long story short, if your navigation experience doesn’t work well on mobile, it’s not working for your audience.
2. Build menus that are accessible for all users, including keyboard input and selection.
   As Web Content Accessibility Guidelines (WCAG) continue to expand, your ability to meet the needs of any user on any device or software is important. With the various formats for developing dropdown menus, it’s imperative that your organization first meets users where they are, regardless of abilities. This includes the ability to use keyboard inputs, such as tabbing across the site, to access the options users need. Keeping dropdown menus easy to use, read, understand, navigate, and convert with, is essential. Fortunately, there are some helpful dropdown and fly-out navigation resources from the Web Accessibility Initiative to help developers create functioning menus for all.

When to Use a Dropdown Menu

According to Nielsen Norman Group, dropdown megamenus can work well for navigation if the site content calls for it. If a site is large and covers many topics (online retailers are especially capable of megamenus), megamenus can be helpful for grouping like-topics.

But dropdowns, even small ones, don’t always have a place. If your organization is large and covers a wide variety of topics, dropdown menus can be helpful to get users where they want to go efficiently. They’re also helpful if you have a limited capability with your internal site search.

As displayed in megamenus, dropdown navigation can be great for grouping like-items or categories, or when using broad but distinct main navigation terms that can mean several different actions to the end user. Lists of content, too, can be effective when used in dropdown navigation, especially for interactive online forms.

Don’t be Afraid to Ask Your Users

Remember: It’s best to do user research and learn how your target audience expects to interact with your brand or website, rather than just assuming you’re helping them with dropdown menus.

A/B testing, heatmaps, and click tracking can be valuable assets as you test different design approaches. Even talking to your users in small groups, to gain an understand of their frustrations and preferences, will help you build a better navigation experience that meets them in the middle.