E-commerce Drop-down Menus: Examples & Best Practices

A drop-down menu on an e-commerce website is a navigation element that opens a list of categories and links when a shopper clicks, taps or hovers over a label. Site navigation is the path users follow when they look for something to buy, and a well-designed drop-down menu makes that path shorter. That is why testing your drop-down menus with real users, before and after you launch an online store, is a conversion rate best practice.

This guide covers how drop-down menus open (click vs. hover), the pros and cons of large menus, how to build them in HTML with accessibility in mind, how keyboard users navigate them, design best practices, and examples.

What is a drop-down menu?

In a graphical user interface (GUI), the menu's title, or the item in the list that is currently selected, is always visible. Activating it opens the "drop-down" list with more items the user can select.

On an online store, shoppers usually use drop-down menus while they are still researching. This is the main difference from the search box. A shopper who types into the search box already knows exactly what they are looking for, so search sits closer to the purchase. A shopper who opens the navigation menu is browsing, so drop-down menus are less directly focused on conversion. Their job is to help the shopper understand the range and reach the right product listing quickly.

Should drop-down menus open on click or on hover?

If you choose the click option, make it obvious. A small down arrow next to the label, or a menu icon, tells shoppers that there is more behind the label, the same way Google signals its app menu with a grid icon 🙂

If you choose hover, pair it with a short delay before the menu closes, so a small, accidental mouse movement does not make the menu disappear. On touch screens there is no hover at all, so the menu must also open on tap.

What are the pros and cons of a large drop-down menu?

In a large drop-down menu, the shopper does not have to scroll to see the whole menu. All the subcategories are visible in columns.

One fashion retailer we looked at in 2023 used a nice personalization in its mega menu. The groups for women and men were different:

• Women: Shop by Product, Shop by Edit, Marketplace.
• Men: Shop by Product, Most Popular, Marketplace.

Many women choose outfits based on where they will wear them (at work, at a party and so on). An "edit" grouped by occasion follows that way of shopping, which makes it a good criterion for designing drop-down menus for clothing stores. The lesson is not to copy the labels, but to group categories the way your own customers decide.

Pros of a large drop-down menu

• It works like a filter, so it reduces the chances that the shopper gets confused on the website, and it lowers the number of clicks.
• It lets shoppers browse by criteria such as brand, category, product type or price.
• It offers different paths to the same product, because of the selection criteria above.

Cons of a large drop-down menu

• It can slow the shopper's path to purchase by offering too many options.
• It does not work on mobile devices in its desktop form. As more online purchases happen on phones, you need a separate mobile pattern, such as an accordion. Our mobile CRO guide covers the mobile experience in detail.
• If it is not well designed, it looks cluttered and disturbs the shopper's first glance.

How do you build drop-down menus in HTML?

Drop-down menus are an essential part of modern web design, especially on e-commerce platforms, where efficient navigation improves the user experience and can influence conversion rates. HTML, together with CSS and JavaScript, is the base for responsive and functional drop-down menus.

Basic structure: the select element

The <select> element creates a drop-down list. Inside it, each <option> tag is one item in the list:

<label for="products">Show:</label>
<select id="products" name="products">
  <option value="new">New Arrivals</option>
  <option value="popular">Most Popular</option>
  <option value="sale">On Sale</option>
</select>

This creates a basic drop-down with three options: New Arrivals, Most Popular and On Sale. Users select one of them. On a store, a <select> fits choices like sorting a product listing or picking a size. For the main site navigation, use real links instead, as shown in the accessibility example below. See the MDN reference for the select element for all attributes.

Improving usability with CSS and JavaScript

HTML provides the structure. CSS makes the drop-down menu look good and match the rest of the site: size, color, typography, and the transitions that appear when a user interacts with it:

select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
}

JavaScript adds behavior, such as showing a submenu when an option is selected, or loading content without reloading the page:

document.getElementById('products').onchange = function () {
  var value = this.value;
  alert("You selected: " + value);
};

Accessibility considerations

Drop-down menus must work for all users, including people with disabilities. Use the right ARIA attributes so screen readers understand the menu, and make sure every function works with a keyboard alone. For example, aria-expanded tells screen reader users whether the menu is open, and aria-controls points to the ID of the menu it opens:

<button aria-expanded="false" aria-controls="products-menu">See Products</button>
<ul id="products-menu" hidden>
  <li><a href="/women/">Women</a></li>
  <li><a href="/men/">Men</a></li>
</ul>

When the button is clicked, your script sets aria-expanded="true" and shows the list. The W3C documents this pattern in its disclosure navigation menu example.

Best practices for drop-down menus in HTML

1. Keep it simple

   Use a straightforward structure. Complex nested menus are difficult to navigate.
2. Design mobile first

   Design with mobile users in mind, because drop-down menus are harder to use on small screens.
3. Keep load times fast

   Optimize scripts and styles so the menu responds immediately.
4. Test extensively

   Test your drop-down menus on multiple devices and browsers to make sure they work on every platform.

How do you design efficient drop-down menus?

Drop-down menus help shoppers move through your website, and they also play a part in the conversion process. These are the practices that make them work.

Promote your unique selling proposition (USP)

• Highlight offers: Use the prime space at the top of the drop-down menu for unique offers, seasonal sales or exclusive products. Shoppers see it first, and it can draw them deeper into the site.
• Update regularly: Keep the promotional content fresh and aligned with your current campaigns.

Use clear, concise headings

• Logical groups: Organize items under headings that make sense to your audience, such as product type, use or demographic.
• Descriptive labels: Avoid vague labels. Use terms that clearly describe the categories underneath, so shoppers decide quickly.

Adapt the menu length to each device

• Responsive design: Make sure the menu adapts to different screen sizes without excessive scrolling.
• Accordion or mega menu: Use accordions on mobile devices to save space, and mega menus on desktop to show many options at a glance.

Highlight the best offers and popular products

• Dynamic content: Feature best-selling products or current promotions at the top of the list, and update them regularly.
• Visual cues: Use icons, badges or color highlights to draw attention to special deals or popular items.

Test across browsers and devices

• Complete testing: Test the menu on a range of browsers and devices for consistent performance and appearance, and fix compatibility issues that affect the experience or accessibility.
• User feedback: Ask real users how the menu works for them and adjust it based on what you learn.

Get the timing right

• No quick disappearances: Add a delay before the menu closes when the cursor leaves it. Shoppers can correct an accidental mouse-out without losing their place, which reduces frustration. The W3C fly-out menu tutorial recommends this delay because mouse movement is not always precise.
• Submenu delays: Add a slight delay before submenus open on hover, so they do not open while the cursor only passes over them.

Use a clear organizational structure

• Columns: Structure complex menus in columns, aligned in a grid, so they are easy to scan.
• Consistent layouts: Keep the same layout in all menus, so shoppers learn the structure once and find products faster.

Make the menu accessible

• Keyboard navigation: Make every drop-down menu and option reachable with the keyboard.
• Screen readers: Use ARIA attributes so screen readers can announce the menus correctly.

How do you use a drop-down menu with the keyboard?

Keyboard navigation matters for accessibility: users who do not use a mouse must still be able to use every element of the site, including drop-down menus.

Basic keyboard navigation

1. Tab to the menu

   Press the Tab key to move through the page's interactive elements until the drop-down menu is highlighted.
2. Open the menu

   With the menu in focus, press Enter, Space or the Down Arrow key to expand it and show its options.
3. Move through the options

   Use the Up and Down Arrow keys to go through the options. In a navigation menu built from links, Tab also moves from one link to the next.
4. Select an option

   Press Enter on the highlighted option to select it. This triggers its action, such as going to another page or updating content on the current page.

Tips to improve keyboard navigation

• Logical tab order: Keyboard users should reach drop-down menus in the same order as they appear on the page, usually left to right and top to bottom.
• Visible focus indicators: Show clearly which element has keyboard focus, with a change in color, a border or a shadow.
• "Skip to main content" links: Add them at the start of each page, so users can bypass long navigation menus with a single keystroke.
• Consistent patterns: Make all drop-down menus on your site behave the same way, so users know what to expect.
• Short, clear menus: Long lists are slow to move through with a keyboard. Limit the number of options or group related items.
• A delay before closing: Menus that close as soon as focus moves away are difficult for keyboard users. A short delay gives them time to make a selection or return to the menu.

What are some examples of drop-down menus, and what should you test?

These stores used drop-down menus to organize large catalogs into categories shoppers could scan quickly when we reviewed them in 2023:

• H&M
• Zappos
• Sunglass Hut

A menu that works for one store can fail for another, because the catalog and the shoppers are different. The table shows what you can test in your own menu and how to read the results.

To see how the menu fits into the full path from landing to purchase, map it as part of your user flows. Omniconvert Explore lets you A/B test each of these menu changes, segment the results by device, and run on-site surveys that ask visitors what they could not find.

Frequently Asked Questions