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

No_results

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.

Logo_distressed

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

Mega menus have been applauded by gurus such as Jakob Nielsen for their ease of use, so it's little surprise that they've become the menu of choice for a growing proportion of ecommerce retailers.

If you are planning on adding a mega menu to your site, want to improve your existing menu or just need some inspiration, here is a round-up of some of the things online retailers are currently doing with their horizontal navigation.

1. Argos

Argos uses a part-width mega menu to provide easy access to hundreds of different product categories.

Major categories are marked in bold to draw the eye to the appropriate area and it uses neatly spaced columns to help differentiate between sets of subcategory within.

2. Asos

 

Asos also goes for a part-width mega menu. It stands out from the page slightly thanks to a subtle drop shadow on the bottom and right hand side. 

It doesn't break up the subcategories as much as others do, which makes the menu a bit more dense and harder to scan. However, it uses a dividing line to separate the subcategories within the main category "women" from the other links, so the running copy does feel as though it's all part of the same section.

There are also some links in the Shop By Collection part at the end which satisfy customers who prefer to shop in a different way. 

3. Ebuyer

Ebuyer's mega menu fits well with the theme of the site and is held together nicely by an orange border which extends from the tabbed navigation. 

It includes prominent category names at the top of each column, making it easy to find what you're looking for. Each category has its own column, so categories with multiple subcategories are shorter than those with many.

This is clearer, but might present problems for information architecture because you're going to be forced to keep subcategories to a small number to prevent the mega menu from becoming too tall.

4. Lakeland

Lakeland's mega menu uses bold headings in a larger font to clearly define categories, with subcategories appearing beneath. Its menu is on the tall side, so it might pose an issue to customers browsing on netbooks which have a short display depth of only 600 pixels or so. 

While it's really clear and very navigable on larger screens, I wonder whether Lakeland had difficulties in making all of their categories fit on the menu, because some of them, such as "Bins, recycling and composting", don't have any subcategories beneath, suggesting they couldn't fit them all on.

Making it fill the entire width of the screen might make it possible to fit in more of the subcategories for some of the categories for which there are currently none, and could solve the problem of its tall height.

5. B&Q

DIY retailer B&Q has quite a lot of stuff to squeeze in, so its mega menu is on the large side. It has grouped categories into blocks with a prominent heading, making it easy to find what you're looking for.

However, the lists within the blocks are of unequal size, which looks a little strange and might restrict scalability.

The Pet & Bird Care block on this menu looks a bit odd as a result. Nonetheless, it's fairly well designed and is very easy to navigate.

6. Dixons

The Dixons mega menu failed to load properly on my Mac, leaving me with a mess of layered menus that were hard to navigate.

It worked after a refresh to reveal a minimalist menu with clickable category headings and neatly ordered subcategories. It lacks column borders, which makes it a little harder to scan. 

7. House of Fraser

The main categories on the House of Fraser menu are clearly laid out and there are borders to help group related content. However, there are also some odd gaps for no apparent reason. 

8. John Lewis

 

The John Lewis site uses columns to group content into related sets and uses a pale grey bar with bold headings.

For me, this doesn't work as well as some others here and I find the headings blend into the nav bar a bit too well giving the menu a cluttered feel.

9. Comet

Comet's mega menu is uncluttered, clear and easy to navigate. It makes good use of the full width of the page by utilising the far right hand column to promote advice guides which help aid the customer in picking the right product.

The use of images is also eye catching.

10. Maplin

Maplin has gone for a slightly different approach and used a combination of columns and rows. This defies the usual convention making it feel a little different to the others here.

11. Kiddisave

Kiddisave uses the full page width and uses clear headings to define sections. It makes good use of the right hand column for promoting best-selling products, and there's a neat Top Brands column on the far left for those only after a certain brand. 

 

Kiddisave has extended the use of brands to a menu of its own, which makes it really easy to find certain brands and aids SEO by directing search engines to brand landing pages via the appropriate keyword phrase.

12. Fat Face

 

Fat Face uses a combination of double-column mega menus and single column drop-downs. They're clearly laid out and work well, but they might be missing a trick in not using a wider menu to promote other stuff. 

13. Jigsaw

Again, Jigsaw uses a combination of small double-column mega menus and single column drop-downs. The headings could be clearer and some of the second columns are very sparse indeed. 

14. Monsoon

Monsoon's menus are also very minimalist, but the column border makes them easy to read and the headings are clear. 

15. Next

 

Next's mega menus are mainly four or five columns wide, but there's also a single column menu for Flowers and Gifts.

They're easy to scan and it's simple to find what you're looking for. There are also shortcuts to other related categories in the left hand column. 

16. Lovehoney

On the Lovehoney site the subcategories are clearly visible and easy to find, popular subcategories get their own column and there's even an additional column at the end for guides and FAQs.

The spacing used seems to make it particularly easy to scan, or perhaps it's the lines beneath the subcategory names.

I particularly like the clever use of the top edge of the menu here to promote Lovehoney's USPs, such as 100% free returns and discrete free shipping.

It's a well executed example, but I did wonder if making the menu wider by adding an extra column to promote offer or best selling products with some images might further improve it.

17. MyProtein

MyProtein has managed to fit its whole product range on this menu, which is quite unusual.

It uses a full-width mega menu with clear headings for each section and columns to help separate the categories making it fairly clear and easy to scan, despite the large number of links.

 

More impressive though are MyProtein's other menus for Your Goals, Your Sport and About Us. Each one is image rich, attractive to look at and a cracking example of how to use a mega menu really effectively.

Compared to these more graphical menus, the Our Range menu feels a bit cluttered, and I wonder whether MyProtein could further improve it by moving the search box to the middle of the page and extending the menus to include more imagery and promotions for popular lines.

18. Novatech

Novatech's simple mega menu uses bold text to mark out the columns and single pixel borders to aid demarcation. Top-level categories, such as monitors, which include smaller numbers of links, get the single column treatment.

 

19. Blacks

 

Blacks' mega menu feels particularly clear. The headings are very clear, it's easy to tell which related set you're looking at and it's quite easy to scan.

Like Novatech, Blacks also uses smaller single column drop-downs for those top-level categories which only have a small number of links. 

20. Wiggle

 

This is another simple but effective menu. The category headings stand out well and the columns are clear, so it's easy to scan. Rather than simply listing the subcategories, Wiggle also lists top brands, what's hot and what's new, but does so without the use of images. 

21. La Redoute

 

La Redoute has a fairly minimal menu but it's clean and easy to navigate so it works well. 

22. JJB Sports

The JJB Sports mega menu has fairly clear headings and clear columns. However, when the equipment tab is used, the width of the mega menu extends beyond the edge of the page, so users with a screen resolution of 1024 pixels end up with the outer edge of the menu missing.

23. Jaeger

 

Jaeger's mega menu is slightly unconventional in that it lists the subcategories in the bottom left hand corner. It gives prominence to promotions, such as the new season offers, sale and editor's picks.

It looks attractive but as it defies the usual convention seen on the majority of menus it doesn't feel as instantly usable to me

24. Selfridges

 

Selfridges has tried to cram quite a lot onto this double-column menu, which has made it rather long.

The headings are clear and the pixel border makes it easy to scan, but it feels too tall and users with short screens might need to scroll.

25. Marks and Spencer

 

26. Mamas and Papas

 

The Mamas and Papas mega menu is another good example of how to use the right hand column of a full-width menu to promote a particular offer. The Shop by Model section also shows how you can create related setsby clever use of the column border.

Mega menu tips

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 (see Asos for an example of how to do this for a really long multi-column list).

Avoid laying out the content into rows as this can make the ordering look random, which goes against the point of using a mega menu in the first place. 

Show 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. Quite a few of the menus above didn't work perfectly.

Consider going full width

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.

Promote your USPs

Promote offers, guides and unique selling points on your mega menu. Check out the probably-not-safe-for-work Lovehoney site for a great example of the USPs and Comet for the help guides.

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 mega 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, such as Blacks, 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 subcategories, otherwise you'll make the menu too big and overwhelm your visitors.

You also need to get the category names just right, so test them before releasing your menu. 

Matt Clarke

Published 4 July, 2011 by Matt Clarke

Matt Clarke is E-commerce Manager at Swell Uk and a contributor to Econsultancy. Follow him on Twitter , Google + or connect via LinkedIn

5 more posts from this author

Comments (25)

Comment
No-profile-pic
Save or Cancel
James Gurd

James Gurd, Owner at Digital JugglerSmall Business Multi-user

Hi Matt,

Useful post, thanks. Something that has become incredibly powerful for eCommerce teams (and this can be proven using web analytics) is the integration of merchandising systems (either custom built of hosted such as Mercado/Endeca/Fredhopper etc) into the mega drop down menu space. Retailers like HRG (Argos/Homebase) have done this successfully to enable them to dynamically manage the drop down menu based on actual visitor behaviour. Your reference to customer favourites is a good example.

I really like the inclusion of non-product content in mega drop downs, as illustrated by LoveHoney. Brands have a real opportunity to think laterally when it comes to menu navigation and test the impact of including all types of content into the pane - blog articles, guides, videos, community content etc. The mega drop down menu is a great place to surface your content to help the customer with their navigation path.

Thanks
james

over 5 years ago

Matt Clarke

Matt Clarke, Ecommerce Director at B2B

Thanks, James. That sounds really interesting. Must check out Argos and Homebase to see if I can spot it in action.

I'm building a similar kind of thing for our sites which will (hopefully) be able to also show personalised recommendations in the mega menu, based on a customer's behaviour and past purchases.

over 5 years ago

James Gurd

James Gurd, Owner at Digital JugglerSmall Business Multi-user

Hi Matt,

Another interesting thing in CMS systems to support content surfacing in mega drop downs is to treat non-product content as products in the database. By setting things like "How to" articles and buying guides as a different type of product, not a piece of content, you can treat them as cross and up-sell associations which fits in nicely with how merchandising systems make associations. It can help reduce the cost and complexity of managing multiple types of content.

It's great when tech makes life easier. Good luck with your plans for the mega menu.

cheers
james

over 5 years ago

James Gurd

James Gurd, Owner at Digital JugglerSmall Business Multi-user

Re Argos, hover over Toys & Games - you can see an additional section for Toys by Age which appears driven by attributes in the merchandising system, not by category structure in the database.

thanks
james

over 5 years ago

Matt Clarke

Matt Clarke, Ecommerce Director at B2B

Excellent. Thanks, James.

over 5 years ago

Avatar-blank-50x50

Viktor Dite

hi, i have found out, mega menus are bad for onpage seo, what do you think about?

over 5 years ago

Matt Clarke

Matt Clarke, Ecommerce Director at B2B

As far as I recall, there's apparently a recommendation in the Google Webmaster Guidelines which suggests limiting a web page to 100 (unique) URLs. If your mega menu pushes you over this limit there's a theoretical possibility it might harm SEO if this suggestion remains true today.

I'm not a SEO expert though, so hopefully someone with more knowledge will be able to clarify.

over 5 years ago

Peter Leatherland

Peter Leatherland, Online Sales Manager at Ethical Superstore

I look after a destination marketing site and we use a Mega Menu (although we call it a MegaNav!) so it’s not just e-commerce they can be used on. The site is similar to ecommerce as there are a large number of events on the site some of which we need to push more to make them more visible and a Mega Menu is ideal for this and easy to switch things around quickly.

I wouldn’t however just bolt one on to any old site, you need it designed in from the start as when the user hovers over you are effectively covering a large portion of the page and some users may drag their mouse down to click on something, accidently triggering the Mega Menu and covering what they wanted to click on. If you look at Argos for example the Mega Menu never goes too far down to cover any product listings, only the main header image. Best to have them disappear fairly quickly once the mouse has left the Mega Menu area (quicker than old style drop down and scroll along menus).

As for SEO I doubt it will be a problem, the retail sites in the article are all genuine sites not spam sites so if this contradicts how Google looks at them then Google will change as their aim is to have good quality and usable sites listed in their results, and Mega Menus help this. The 100 URL limit you mention is I think for external URLs, so if you are linking to pages on your site it isn’t a problem. In fact it will probably help as you are getting keywords and product names into the menus

over 5 years ago

Justin Tyler Broomes

Justin Tyler Broomes, Founder - eCommerce / Digital Project Manager & Consultant at Justin Digital Ltd

the question is, who's the overall winner??

over 5 years ago

Avatar-blank-50x50

Taschen Shop

Nice article :)

over 5 years ago

James Gurd

James Gurd, Owner at Digital JugglerSmall Business Multi-user

Justin,

How are you defining winner? Based on best practice? Looks? Design? UI? UX?

Arguably the only commercially sensible way to define a winner is to look at the web analytics data and see how effective each navigation menu is at channelling customers through the website and influencing KPIs like conversion.

Sometimes the best looking designs have the worst metrics. Sometimes they have the best. It's a fickle world this eCommerce:)

Viktor - mega menus are not in themselves bad for SEO, it's how you architect them that decides that. For example, it's possible to do the menu in the CSS without using javascript. Don't ask me how though, I'm not a developer. However, there are some people raising questions about how Google deals with mega drop down menus following the Panda update. The jury is out....read this thread to see the lack of concensus http://www.webmasterworld.com/google/4291184.htm

If you make the content unreadable to the search engines, then yes it's going to be a problem. Equally, if you include broken links, you'll have problems. This is where switched on developers who understand accessibility/usability come into play to code it the best way.

My take - test it. If a mega menu improves click through, page views, goal completion etc and drives commercial value, that's hugely important. Easy to use web analytics & testing tools to prove this. If you experience a simultaneous drop off in SEO, validate the numbers and compare pros and cons. Make a commercial decision based on fact, not supposition. Fact is nobody really understands the full implications of the Google algorithm, not even Google.

thanks
james

over 5 years ago

Matthew Curry

Matthew Curry, Head of Ecommerce at Lovehoney

I'm not 100% on this - but I think Google is making efforts to understand what is editorial content, and what is navigation on a page.

It's clever enough now to realise that the great big list of links it sees in the body of each page of the site is likely to be navigation, and so won't keep spidering off each time it sees them, and will instead focus on your important links in the editorial content of your page.

over 5 years ago

Avatar-blank-50x50

Bob

As far as I'm aware the 100 links per page recommendation was due to Google's technical capability at the time.

Now the figure isn't pushed as much, although linking to thousands of pages (or having your meganav closely resemble a sitemap) probably isn't a great idea as it will be diluting the flow of PageRank or "link juice" etc

Navigation wise I generally prioritise based on search volume and bestsellers rather than try and promote absolutely everything.

over 5 years ago

Matt Clarke

Matt Clarke, Ecommerce Director at B2B

Presumably the new HTML5 nav element will also help, too.

over 5 years ago

Avatar-blank-50x50

Mike Upton

Mega menus seem to be the way to go for any eCommerce site that has a diverse portfolio of products. With regards to the SEO element I would ignore the outdated advice to always use less than 100 links on any page but I would be very mindful of filling the menu with every link possible. Your homepage is likely to be the most authoritative in your site and so this authority needs to flow well to the main categories (and beyond) from this page. If you end up with 200 links from your menu then you are dividing up the flow of authority between every single one of them. This is where careful planning of your category titles comes in and is something that is often overlooked. There is a fine line between ensuring customers can reach the content they want quickly and overloading your navigation with far too many links which spreads your authority too thinly.

Please bear in mind that just because x shop has 200 links in their navigation and it works for them that this blueprint can then be used for your site too. Chances are that x shop has been around since the dawn of time and has massive weight already with the search engines which allows them this flexibility. Newer eCommerce sites with less of an SEO standing should maybe look at a smaller set of navigation links initially to ensure the best chance for your main category pages and your product pages to be picked up.

If you are looking to build this feature from scratch then I would also recommend that it is created via CSS where possible (as mentioned by James Gurd). It is possible that a javascript version will be picked up by Google (they are getting a lot smarter with this) but there are no absolutes with this so CSS is the sensible route to go.

over 5 years ago

Avatar-blank-50x50

James Chillcott

Great research...very helpful in some mega menu planning we're currently working through...thanks!

over 5 years ago

Rob Davis

Rob Davis, Interactive Marketing Manager / Designer at AFL / web|aggression

Intriguing list. I have been facilated with the "mega menu" as you call it. I particularly like the featured product and categorical images. Thanks.

over 5 years ago

Avatar-blank-50x50

Toronto Website Design

I prefer Zappos method of relying on simple parent categories listed vertically for type and an alphabetized horizontal listing below the nav that once selected populates a pretty clear mega menu of brands that start with the letter you selected.

When you've got 1000's of items any first page mega menu is either going to be too broad or too busy.

ssense.com also has a good vertical menu but could benefit from a horizontal sub menu like on Lovehoney. The grid aspect of it is much easier on the eyes. Designing a website that allows easy navigation to a large number of items should also take in account the business type and brand familiarity with your target demographic. If the OEM listing doesn't look like a listing of names they'd know then its a waste.

I like the suggestion for MyProtien to move the search to the middle. For e-comm the search doesn't need to be in the familiar upper right hand site wide search space and should be grouped with the product listing such as in the suggested centre of the page.

over 5 years ago

Avatar-blank-50x50

Advoca

I posted quite a lengthy comment that provided examples of other sites to support the opinion which is more than 99% of the other comments and mine was deleted?

summary: zappos.com menu system is far better than every example there and I could go into how again but why? I still don't know why the other comment was deleted at all...

very fishy guys

over 5 years ago

Peter Leatherland

Peter Leatherland, Online Sales Manager at Ethical Superstore

@Advoca I have had quite a few comments vanish on econsultancy, I contacted them and it is their over eager spam filter rather than anything fishy

over 5 years ago

Avatar-blank-50x50

Advoca

Thanks Peter!

I should back up all my lengthier comments then!

I appreciate the help.

over 5 years ago

Avatar-blank-50x50

elebore xiang, software engineer at tieto

I lack for e-commerce.I should learn from you.Would you recommend some materials about e-commerce for me?

over 5 years ago

Avatar-blank-50x50

Nik

A menu worth mentioning is lowes.com. They have the most advanced and nicest looking mega menu of anywhere that I've seen so far. Everything is spaced nicely, easy to read and makes very good use of images and promotions.

homedepot.com also has a mega menu, while not nearly as interesting as lowes...theirs is unique by being a vertical menu, which lets them roll-up into one element on internal pages.

about 5 years ago

Avatar-blank-50x50

Theresa Mordi, AVP at Morpheus

Interesting revelation as I tried to visit the lowes and zappos websites. Both of them not allowing traffic originating from my location, am in Nigeria. Not accepting payments from a region is one thing but blocking the viewing of the entire site is quite sad and comical.

Very useful post by the way.

almost 5 years ago

Avatar-blank-50x50

Neil

Really interesting article. Important to note that many of these mega navs would fail to work effectively on a tablet (or phone). I notice some websites are toning down their use of mega navs. Interestingly, Starbucks is a good example of a website that uses on-click to activate their mega nav, which enables the site to function responsively.

over 4 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

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.