{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.


That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.


Sorry about this, there is a problem with our search at the moment.
Please try again later.

Drop-down menus are a valuable navigational tool for e-commerce and other sites. There are potential usability issues, but a well designed drop-down will help customers to navigate more quickly and effectively. 

In this post, I'll look at some of the pros and cons of drop-downs, mega drop-downs, as well as some examples and best practices from a range of e-commerce sites. 

The importance of drop-down menus

Drop-down menus are now almost ubiquitous on online retail sites and, used well, they enable shoppers to take a shortcut to the product category or sub-category they are looking for, while also providing a chance to promote certain products or offers. 

From a design perspective, the use of drop-down menus also allows a ‘busy’ layout to be tidied up, with all of the sub-categories hidden away awaiting a mouse-over. 

However, they can be fiddly to use when not implemented well, and are frequently a pain when viewed on a mobile screen. 

Usability issues with drop downs

There are some potential usability hazards with drop-down menus, such as losing the menu altogether by moving the cursor out of the menu area. 

To minimise this risk, avoid drop-down menus with more than two levels, as in the example below from Best Buy. 

Since the menu and sub-menus are activated, then the cursor hovers over the menu, it is very easy for customers to hover outside of one of the columns and lose the whole menu. 

It also makes the menu almost impossible to use on a mobile device. 

Making users scroll within drop-down menus should be avoided, as this can be a fiddly process which creates more work for the user, and increases the risk of losing the menu altogether. 

Hover or clickable drop-downs?

Another consideration is the action that users need to take to activate drop-down menus. 

Users could either click on the navigation bar to activate the navigation menu below, or else the menu could appear when users mouse over the category. 

One advantage of the clickable option is that the menu remains in place whether the cursor remains in the area or not. This therefore removes one potential source of frustration. 

The fact that users have to click to activate the menu needs to be indicated, as in the example on the right from Google. However, the majority of retailers use the hover option, which is one argument against the clickable drop-down. 

If users hover and no menu appears, they may assume that there isn’t one. It also removes the option of clicking on the navigation bar and heading straight for the category page. 

The problem of losing the menu due to misplacement of the cursor can be solved by delaying the disappearance of the menu by a second or two. 

Microsoft’s UK site used to take this approach with its drop-down menus, though it has since redesigned and opted for the clickable drop-down.

If you move the cursor outside of the menu area, it doesn't instantly disappear, but instead users are given a second or two to return to the menu before it vanishes.  

This is an excellent solution to the problem which removes a potential source of frustration for web users.

If a menu is activated by the cursor moving over the target area though, it should be easy to close. After all, the user may not have intended to open the menu. 

In this example from O2, hovering over the data allowance button opens a drop-down explaining the package, but this then obscures part of the comparison table, and it can only be closed by clicking the X. This isn't ideal. 

Mega drop-down menus

Large drop downs can display large numbers of links to sections of the site, and allow users to jump straight to the category or sub-category they are looking for. This means customers reach product pages more easily and quickly. 

The design of large drop downs should be tested though, and it is possible to overwhelm users with too many links. 

Pros and cons of mega drop-down menus


  • Visitors can reach lower levels of navigation quickly, and with a smaller number of clicks. 
  • If well designed, the drop-down can offer a variety of paths to the same product depending on how the customer wants to shop e.g. by Brand or by Product Type.
  • Drop-downs can be used to filter and therefore narrow the customer’s product selection, saving them extra clicks.
  • They enable retailers to intelligently merchandise the menus by offering the most popular categories at the top and on the left of the drop-down, where they are most visible.
  • Mega drop downs work well with horizontal navigation bars. Microsoft eye-tracking research strongly supports using horizontal navigation across the top of a web page, while Jakob Nielsen backs this up with his ‘F-shaped reading pattern’, whereby users start by reading across the top line and then look down the page a little and read across again and then continue down the left side.


  • Drop-downs can be very difficult (and sometimes impossible) to use on mobile devices. With the growth of mobile commerce, and the use of tablet devices, then retailers need to consider the needs of mobile users.
  • Large drop-downs can slow the customer journey by providing too much choice and complexity. The ‘Paradox of choice’.
  • They are often scripted with code that behaves differently depending on the browser used.
  • Large drop-downs can be visually unappealing and cluttered, making them difficult to scan and make sense of. A well-designed drop-down will use different font sizes and colours, icons and images to make them more readable. 

Examples of drop-down menus 

M&S tried out a mega drop-down when it redesigned its website in 2009. 

One huge drop down menu provided all of the links to the shopping areas of the site, with more than 60 links available from the menu. 

All the links are available to click without having to do any scrolling at all, though M&S could have used colour, different font sizes. bold text, and images to make the list easier to scan and digest. 

Also, I think this menu was perhaps too large to be usable, and M&S did replace it with a smaller alternative, which is easier to digest. 


Kiddicare’s drop-down menus provide a good example of filtered navigation, by narrowing users’ searches to car seats for the correct age group, or sending shoppers straight to Isofix car seats: 


For an example of using drop-downs for merchandising, see how Argos places the most popular products at the top and left of the menu:

 On ASOS, the drop downs allow customers to see all of the product sub-categories at a glance: 


Comet uses a large drop-down, but instead of using it to display a long list of sub-categories, highlights some of its latest deals and best selling products. 


River Island used to have a stark drop-down menu with no background. It does match the brand, though the retailer will need to be careful about the images used behind the menu, as this could make the text hard to read. 

It now uses a more 'traditional' drop-down:

Officer’s Club shows the price range on its drop-down menus so that users can filter by price before they reach the category page. 


This should work well for the retailer’s generally price-sensitive customer base. 

This is an excellent example from Sunglass Hut, showing images of the different styles of sunglasses provides a very useful navigation aid. 

There are a large number of options on this Kiddisave drop-down, but the use of logos does at least help to make it easier to scan: 


Tips for improving (mega) drop-down usability

Use 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.

Use columns

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

Showcase your best sellers

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

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.

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.

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.  

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.

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. 

Promote your USPs

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

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 0.5 seconds before appearing, as this prevents the menu popping up every time a user passes their mouse pointer over the top. 

Vary the menu size if you need to

If some top-level categories contain dozens of subcategories 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.

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. 

Graham Charlton

Published 24 July, 2012 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (26)

Save or Cancel


River Island has not been using that style dropdown for some time now. I think it most be nearly a year since they changed to a traditonal mega dropdwon menu.

about 4 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

Thanks Jarvis. I've been compiling examples for a while, and some are old-ish. Perhaps that version didn't work so well for River Island.

about 4 years ago


David H. McGuire

Not entirely sure I'm a believer in BMW's new web look, however I managed to browse through the car ranges pretty seamlessly a few weeks back.

about 4 years ago

Tom Howlett

Tom Howlett, Digital Marketing Executive at Koozai

Useful post. I think the first action towards the design of the navigation should be to simplify the structure of the site into intuitive categories (probably more straightforward for Ecommerce websites). Try to limit the number of options within the navigation to avoid overwhelming users.

You have to decide whether you want to include some pages on the main navigation or not. As long as there is an easy and intuitive route to a page (and there are not too many clicks to get there), it should be much easier to navigate.

about 4 years ago


Gillian Hamilton Rogers, Digital Consultant at Metia

When looking at implementing drop down menus / mega menus, you also need to bear in mind the SEO implications of having so many links top of the page. Ensure you pick the primary ones and have the rest as 'no follow'. Otherwise you might start to see an impact on your page rankings as a) the algorithm penalises too many links on a page and b) it messes around with the semantic hierarchy.

There are of course ways around it, and the usability for the customer is often many times better, but it's something to make sure you address.

about 4 years ago


Gino Lardon

Tablets and other devices with touchscreens are becoming more and more important. Take into account that 'hover' does not work on these kind of screens. That's +1 for the menus that open on click.

about 4 years ago


Depesh Mandalia, Head of Digital Marketing at Lost My Name

Seeing some off the bad examples here and around the Web i think the most fundamental miss is the focus on user goals and the KISS principle. Some simple IA techniques like card sorting with customers and managing depth vs breath of navigation would have eliminated some of those horrendous examples.

Regarding the SEO consideration there is a good chance of diluting page rank but I'm not convinced the no follow route is best

about 4 years ago

Matt Clarke

Matt Clarke, Ecommerce Director at B2B

Interesting post, Graham.

The SEO issue that Gillian mentions is interesting. I understand that there are recommendations to keep the number of links in boilerplate content, such as navigation, to a minimum. However, I wasn't aware that adding the nofollow attribute to the links would avoid any supposed penalty. I've previously read that Google advises against the use of nofollow for Page Rank sculpting, so I'd be interested to hear what other SEO experts think on this issue.

There's an interesting discussion on the nofollow attribute in mega menus here: http://inchoo.net/ecommerce/why-relnofollow-in-ecommerce-menus-is-a-bad-idea/

Like most people, we're using the HTML5 nav element to help search engines identify the navigational links, which will hopefully overcome the problem.

about 4 years ago


Sean Owens

Excellent article and comparisons. Most clients tend to gloss over this. Once their site goes live they then see other sites and become more menu savy.

Interesting to see where riverisland have been and come back to in terms of menus.

Well done.

about 4 years ago


Depesh Mandalia, Head of Digital Marketing at Lost My Name

Matt that article hits the nail on the head - adding nofollow means losing any pagerank to that page as opposed to reserving it for other links - its useful for things like external references where you don't trust the external article - its like having 100 votes on your site and you using 95 votes on your site pages and telling google, via the nofollow, that you'd rather not use those extra 5 votes. There's no net benefit

Instead, use those 100 votes in the most proficient manner by only linking to the most relevant content and not stuffing too many links into a mega menu

about 4 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

@Depesh so SEO considerations mean the death of mega-menus? It does seem that a number of sites that used to use them have changed tack.

How many links in the menu is too many?

about 4 years ago

Matt Clarke

Matt Clarke, Ecommerce Director at B2B

@Depesh - Thanks very much for the clarification! Much appreciated.

about 4 years ago


Depesh Mandalia, Head of Digital Marketing at Lost My Name

@Graham I'm guessing that's the reporter in you trying to stir something up - certainly not the death of mega menus I think its just a consideration.

99% of the time, get the UX right and the SEO thing kind of works too - that extends to things like making sure your nav items have title tags, images have alt tags which are good practice UX items

How many is too many? Again I'd focus on what's going to make most sense to the user - as for the SEO impact header and footer links are discounted in various ways as having less impact authority than links in the body of the page so again I'd not focus on the SEO impact as much as the UX

However, I'd also certainly not nofollow them either.

about 4 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

@Depesh - perhaps I was being a bit dramatic..

about 4 years ago


Depesh Mandalia, Head of Digital Marketing at Lost My Name

@Graham with respect to changing tact on mega-menus I think you could probably boil it down to the ipad - yes mobile browsing existed before that however the ipad brought out the best of mobile and laptop allowing you to browse more freely than a laptop but also to purchase items easier than a mobile - as businesses have taken note, they've been forced to look at things like progressive design and impact of touch-screen Vs mouse-click more seriously - i'd put it down to a reaction to tech changes as much as any user-led insights into how well they worked... be interesting to see how those sites degrade/perform on mobile browsers too

about 4 years ago

Dan Sharp

Dan Sharp, Director at Screaming Frog

Just to chip in so there is no confusion with regards to these menus and SEO -

1) These menus are generally fantastic for SEO as they improve distribution of PageRank with a flatter internal link structure.

2) You should never use 'nofollow' on these links and rarely ever on any internal links. PageRank diminishes when used on internal links. The use of 'nofollow' was an argument that PageRank could be sculpted, but that argument died at least 3-years ago.

3) You do not receive a penalty by including lots of links in a mega menu like this, but you can spread PageRank too thinly with too many links. You can receive a penalty if you put this many links in your footer though. Why? As they are not there for the user ;-).


about 4 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

Thanks for the clarification Dan.

about 4 years ago


Toni Aničić

I'm the author of the linked article at inchoo.net.

@Dan, I agree on the first two points, but number 3 can be tricky. We see more and more examples of "mega-footers" that work really well, such as the one on Zappos. I agree that if you put a lot of stuff in footer it can be problematic, but if you replicate a well structured top mega-menu, I don't believe you'll have any problems. If it's there for the user it's OK.

about 4 years ago

Dan Sharp

Dan Sharp, Director at Screaming Frog


With Zappos quite a few of the links are replicated from the top mega menu. So this will be practically zero added SEO benefit.

So in terms of unique links, it's not as big as first glance perhaps. So I can see why they would work here :-)

But in our experience, if you overdo it, you can get nailed algorithmically. But at the sametime, you can also recover extremely quickly.

about 4 years ago


Depesh Mandalia, Head of Digital Marketing at Lost My Name

Agree completely with Dan on this - I'll add my tupence from earlier this year a small test site of mine was hit for overdoing the footer links - removed and rankings went up (not to the same level...) after some weeks

The penalty in the footer is more about keyword over-optimisation - I'd also state that simply seeing a website with them does not necessarily mean they've not been penalised or that footer links work for them or their customers

They will however largely be devalued so I'd guess Zappos put them there for UX reasons and not SEO

about 4 years ago


Stephan Jaeckel

Its wonderful what can be done with modern mega-menues in the dropdown area. and ifts nice to see them spread.

But as always there are downfalls with it. And while Web-Staff or marketing people in a company may see things differently often internal fights define the menues content. So because a tiny department generates a huge turnover for the company despite its size it gets into the menue even with almost no visitors interested in that product or service.

Even services offered which might distract other customers or interested people to purche something else there get into the menue. In the financial fields these may be insurances for hunters (turning off vegans or vegitarians and basically all animal lovers) or funds speculating with food within a bank's portfolio.

Going to the site of German Allianz Versicherung and choosing their Privatkunden offerings you will even find Germanys largest insurer having more topic-specific newsletters than insucrance categories on offer.

Big sized drop down menues do run a thin line between being an easy to grasp graphically enhanced navigation tool aiding useability and a "look-what-we-have" garage sale by companies who wish to boost each and every product line, service or tool.

Yet even a mega-menue can not accomodate 30+ tools an insurance company may offer for its brokers online. However it makes it more obvious than traditional pull-down menues that there is some need for internal changes with what the company does offer. Usability often comes down to a "what" rather than a "how to" question :-)

about 4 years ago



Thanks for sharing I working on my own site and I wanted to add drop down menus. Do you have any links on how to do this? Many thanks.

about 4 years ago



I’m creating my own online store website, and I wanted to add drop-down menus. This is very timely post. Thanks for sharing.

about 4 years ago



Hello! I just wish to give you a big thumbs up for the great information you have here on this post.
I'll be coming back to your site for more soon.

about 4 years ago


Laurent He, Sales Manager at SliceMaker Soft, Inc.

For the discussion - Hover or clickable drop-downs? I think most webmaster will choose hover drop-down rather than clickable drop-down. And, most visitors get used to the hover drop-down.

over 2 years ago


Valentina Huff, VP at Hughes Media

Do you believe top level menu items should be clickable as/to their own pages for SEO ranking purposes?

9 months ago

Save or Cancel

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.