December 9th, 2012 | 3 MIN READ

12 Design Best Practices for Drop-Down Menus

Written by author_profile_images Linda Bustos

Linda is an ecommerce industry analyst and consultant specializing in conversion optimization and digital transformation.

We often focus optimization activities on landing pages, checkouts and home pages, and less on the pages that provide the "assists" in conversion. Today's post shines the spotlight on navigation menus, with an excerpt from Econsultancy's Ecommerce Best Practice Compendium.

These ecommerce navigation menu best practices are just 12 of the over 170 tips in the report.

Tips for improving drop-down usability

1. Use clear headings

One of the main reasons for using a mega menu is to present a large range of links in related sets. To show users which links fall into related sets, you can use headings to group them together.

2. Use columns

Most sites already group related sets into their own columns and often use a single pixel column border to help with demarcation.

3. Showcase your best sellers

Save time for customers by placing your best-selling products on the mega menu. This means that users can click directly to them without the need to visit a sub-category and then locate the product.

4. Keep it short

Be cautious of making your mega menu too tall. It might extend off the page if they are browsing from a small screen, such as a netbook or mobile device. You can check how many of your customers have such screens by using Google Analytics. Try to make the menu fit the majority of screen sizes.

5. Add a border or shadow

Help the menu to stand out from the page content better by using a drop shadow or subtle border. This is particularly important if you're using a white menu on a white background.

6. Test it in a range of browsers

Make sure the menu works in all browsers by undertaking plenty of cross-browser testing to ensure it's easily navigable for everyone.

7. Consider using the full width of the page

Some of the clearest and most effective mega menus are the ones which span the entire width of the page, or a significant proportion of it. They allow the site to include clearer headings, supporting images and promotions for offers and best-selling products, which aids usability and helps drive sales.

8. Use images and icons

The Sunglass Hut example, and this from BMW show how drop-down menus can be more useful, as well as easy on the eye, with the addition of product images.

9. Promote your USPs

Promote offers, guides and unique selling points on your mega menu.

10. Get the timing right

Make sure the menu appears rapidly, stays in place while the user's mouse is hovering over the top and vanishes when the mouse is moved away. Jakob Nielsen recommends that the menu should wait for half a second before appearing, as this prevents the menu popping up every time a user passes their mouse pointer over the top.

11. Vary the menu size

If you need to If some top-level categories contain dozens of sub-categories while others contain just a few, consider using mega menus containing different numbers of columns. Some sites with small ranges in certain areas use a combination of wide multi-column mega menus and short drop-downs to good effect.

12. Focus on granularity

When you're planning what to include on your menu, take time to consider your approach.
You don't want to offer too many groups or include too many sub-categories, otherwise you'll make the menu too big and overwhelm your visitors with too many options.

The entire Ecommerce Compendium Report is available from Econsultancy.

Share on


Thanks for signing up!

You'll receive a welcome email shortly.

By submitting this you agree with our privacy policy.