25 Examples of Mega Menus in Web Design

Mega menus are a growing trend in web design (see Mega Menus: The Next Web Design Trend from Sitepoint). For sites that involve a lot of pages and/or products, a mega menu may be able to improve navigation and usability. In this post we’ll look at 25 examples of mega menus in action.

Many of those featured in this post are from e-commerce websites. Mega menus are common on e-commerce sites because they typically include a lot of categories of different products, and so mega menus can be very useful for visitors. They are also a possibility for other large websites where fewer clicks can be used to get to a specific page with a mega menu.

Little Kids Bedrooms

Little Kids Bedrooms

OfficeMax

OfficeMax

Office Depot

Office Depot

Action Envelope

Action Envelope

ASOS

ASOS

The Sak

The Sak

Nike

Nike

Adidas

Adidas

Etnies

Etnies

Target

Target

REI

REI

House of Fraser

House of Fraser

Northern Tool + Equipment

Northern Tool + Equipment

Food Network

Food Network

Martin + Osa

Martin + Osa

Quiksilver

Quiksilver

Might Leaf Leaf

Might Leaf Leaf

Lucky Brand Jeans

Lucky Brand Jeans

B&Q

B&Q

3 Suisses

3 Suisses

Like.com

Like.com

Spread Shirt

Spread Shirt

Walmart

Walmart

Rampage

Rampage

mydeco

mydeco

For more design inspiration, please see:

0 shares
Stephen Snell is the owner and editor of Vandelay Design, a popular design blog.
  1. August 5, 2009

    oooh nice. I need to do something like this on a wordpress site.

  2. Pingback: 25 Examples of Mega Menus in Web Design « Badurally’z Blog

  3. August 5, 2009

    This is a brilliant post as i am currently embarking on my first e-commerce website. The successful multiple menus above are clear list style and categorized, using hierarchy and colours.

  4. Pingback: 25 Examples of Mega Menus in Web Design « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit

  5. August 5, 2009

    Awesome menu styles, Have to plan for one.

    Thanks
    Sankar

  6. August 5, 2009

    Nice list! Thanks for the post!

  7. SD
    August 5, 2009

    How about the Ikea website menu?

    There are some good ideas in here. Thx 🙂

  8. August 5, 2009

    Nice post,
    I suggest taking a look at Porsche site as well; if interested I rebuilt the whole menu with css + Jquery.

  9. toongimp
    August 5, 2009

    A few of these look clean and all but make site functionality terrible. I’ll use my common sense if I were you lot.

  10. Pingback: 25 Examples of Mega Menus in Web Design | Squico

  11. Pingback: LISTDUB» 25 Examples of Mega Menus in Web Design

  12. August 5, 2009

    ‘Mega Menus’ are the worst trend ever invented. If you feel the need to use a ‘Mega Menu’ go back to the drawing board and do an IA. This is a great post on what not to do.

  13. Pingback: links for 2009-08-05 | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

  14. August 6, 2009

    Great examples of well structured and organised navigations. Sometimes as a designer it can be worrying when you are presented with a complicated site navigation, but it is also a fun challenge to try and organise it and present it in a pleasing and usable way.

  15. August 6, 2009

    have to agree with vjay. Most department store websites I have ever come across have used this ‘trend’ – it really is nothing new!
    It really is an example of what happens when Information Architecture gets left out of the design/development process.

    If you find yourself staring at a ‘mega menu’ at any stage in your design process you really need to rethink your strategy and go back to the drawing board.

    Good post … horrible ‘trend’ to be avoided at all costs!

  16. August 6, 2009

    What a tremendous collection of excellent navigation possibilities.

    This type of navigation seem to be clear and organized giving the visitor what they want when they want without having to dig too much…


    Thanks & Regards
    Noel from nopun.com
    a professional graphic design studio

  17. Pingback: 25 Examples of Mega Menus in Web Design | Design Newz

  18. August 7, 2009

    Really great,

    Mega menus offer a good compromise between simple and expanding menus. They are easy to use and should suffer fewer accessibility problems. They look great and give designers more scope to express their artistic creativity!

  19. NicoleB
    August 7, 2009

    SD, I like the Ikea nav as well, simply because it pops the mega menu into the left nav. I like that better than overlaying the content on the page.

  20. Pingback: BlogBuzz August 8, 2009

  21. Pingback: MacDaddy Links of the Week: Aug. 2-8 | bkmacdaddy designs

  22. craig
    August 14, 2009

    Well,

    All the whiners that go on about IA are missing the point where they talk about the ‘size’ of these menus. I can visit a department store and look at the store ‘menu’ which is very large at my local John Lewis.

    However, since the hierarchy, groupings, style, visibility of headings, font, contrast with background, size of text are all very good – it allows me to find the thing I’m looking for and get to the correct floor.

    Don’t complain about them not doing IA just because they have a big list – complain if the design of the list sucks. Big menus aren’t inherently bad – poorly designed ones are. Test stuff with users and do your research (card sorting, IA etc.) of course but make sure the fundamentals are there regardless of size of menu.

    C.

  23. Pingback: Bluewire Media Web Design Blog » Blog Archive » Weekly round-up

  24. August 20, 2009

    Thanks, I was considering doing something similar for our client list.

  25. August 20, 2009

    Mega Menus are definitely on the rise. I think they are awesome!

  26. Pingback: * 25 Exemplos de “Mega Menus” - Top of your Mind

  27. Pingback: Monthly Mother Lode of MacDaddy Links: August 2009 | bkmacdaddy designs

  28. Pingback: Monthly Round Up: 56 Inspiration and Showcase Articles @ Designussion

  29. September 9, 2009

    great examples, will consider them in the future

  30. September 9, 2009

    really cool stuff

  31. Pingback: Drinking From The Firehose – Design Inspiration August 2009 « Pushing Pixels

  32. hotmac
    October 1, 2009

    Btw: RAMPAGE does not have any MMs anymore…

  33. Pingback: » Website navigatie: denk na over plaatsing, weergavestijl en interactie - Ferry den Dopper’s blog

  34. Pingback: Websitenavigatie: denk na over plaatsing, weergavestijl en interactie - Frankwatching

  35. DJ FatSkank
    November 11, 2009

    Don’t forget teh menus on http://www.fortnumandmason.com/ – especially the wine one…

  36. December 28, 2009

    Sweet, we are implementing mega menus at my full time job in trying to unify all our websites into a portal type site. This is going to be handy for inspiration.

  37. Bob
    January 22, 2010

    Pixels are finite + Navigation is a modal activity = show/hide navigation. Mega menus are scannable, yet they get out of the way. The best solution there is (for now).

  38. February 4, 2010

    Marketing team in my company asked for one of this big menus. We did a mock-up in Flash and they gave the go ahead.

    We (developers+designers) spent one week to create a copy of it in jQuery. It look quite nice and elegant. Took Marketing team 20 min to decide did not like it. Their main complain, it was too intrusive, too bulky. Spent again 3 days making changes they requested and still did not like it.

    They decided to scrap it 🙁

    Riga

  39. March 4, 2010

    Im an fan of a large menu especially for e commerce shops, without them i think it is too easy for visitors to miss the majority of what the sites sells. Designing them well is important and this is agreat list of examples for anyone who needs some inspiration.

  40. March 5, 2010

    Mega menus shouldn’t be thought of as a type of menu, it’s a lack of a system. Give us a selection of well designed icons and/or intuitive sliders, not box that covers the entire screen every time my mouse rolls over a button.

  41. April 1, 2010

    I think mega menus are a good idea, it gives the user a quick and simple way to get from one place to another whilst keeping content drilling to around 2-3 clicks which aids usability.

    I think the Adidas site’s mega menu is clean and tidy

  42. April 29, 2010

    wao very awesome drop down menus ,how can do that like the menu? is there anyone can teach me about that??? it is very awesome to show drop down menus

  43. Alan
    May 3, 2010

    Nice examples
    Don’t forget

    butik.dk
    expansys.com

  44. Impressive collection, really inspirational and very useful – Thanks

  45. sheela
    June 8, 2010

    very much useful

  46. June 17, 2010

    not a fan of large menus…

  47. brikola
    June 17, 2010

    A mega drop down menu example (made with web menu software AllWebMenus) you might want to check out is:

    http://www.likno.com/examples.html?example=mega_dropdown_menu1

  48. Wevio.com
    Best Website Company in New York City!

  49. July 22, 2010

    Will be cool, if you can provide us links to tutorials making these menus

    Thanks
    Shovan

  50. July 23, 2010

    Will be cool, if you can provide us links to tutorials making these menus

  51. August 20, 2010

    What great menu design for all of those websites. They are really intended for a great, simple yet entertaining look. Are those kinds of website are difficult to load or not?

  52. September 7, 2010

    They are very impressive. We are making the mega menu for our joomla templates 😉

    Thank you so much for great example.

  53. September 20, 2010

    yes, its will give too many good menu examples.
    Jquery, javascripts menu is too easy .

    Thank you so much for great example.

  54. September 27, 2010

    I love these examples of menus. Any body know of good tutorials out there?

  55. October 18, 2010

    Thanks for the list. The menus are awesome but it have to be used in right place.

  56. October 20, 2010

    This is really good, thank you very much for sharing.

  57. November 3, 2010

    Hello here is good menu example for WordPress : http://www.premiumtemplate.org

  58. November 4, 2010

    thanks for the collection…give me a new ideal for main navigation bar….

  59. November 15, 2010

    Fantastic collection, thanks!

  60. November 16, 2010

    i’m looking for a vertical example, like walmart, does anyone knokn any other site???

  61. December 1, 2010

    Nic 1 😉

  62. December 7, 2010

    very nice design.
    thanks for sharing.

  63. December 15, 2010

    I could only WISH I could do any of these. So much color! These models are beautiful

  64. January 25, 2011

    Very nice menu design but building that menu maybe cost me an entire day of working however thank you for your share.

  65. February 14, 2011

    This site is really interesting. You bring up some great points about your article… .. Thanks for the great information about website design.. It is my first time here in this site so good job…

  66. March 2, 2011

    Some great designs worth considering for future as our range grows. BBT Clothing

  67. I’ve been thinking of creating one of these menu’s. Thanks for the examples. It helps me a lot. Now I just need to find a tool that will help me create them.

  68. March 27, 2011

    We have created a simple Drupal module for formatting Drupal menu into a megamenu style. To review this module : http://victheme.com/product/drupal-mega-menu-module

  69. April 11, 2011

    nice menu. The menus are awesome, nice Design.

  70. April 11, 2011

    One of the best examples of this that I have seen is on the National Geographic website. Vjay and Jerry Black – this is an exceptionally effective way to get users to deeper links and highlight featured content without needing to click down and down through some ridiculous hierarchy.

  71. April 20, 2011

    Great article and your blog template is so cool. Is this template free or not? If so, Where could i download this template? if not, how much does it cost? Thanks a lot!

  72. April 20, 2011

    Hi Nice post

    Thanks for the post

  73. April 21, 2011

    Thanks for your marvelous posting! I certainly enjoyed reading it, you’re a great author.I will be sure to bookmark your blog and definitely will come back very soon. I want to encourage you to definitely continue your great writing, have a nice afternoon!

  74. April 27, 2011

    Great post, all of these sites are very user friendly and have a sleek design to them, def have to use some of these for my upcoming sites.

  75. May 10, 2011

    They look great and give designers more scope to express their artistic creativity!!!

  76. May 19, 2011

    Greetings! I know this is kinda off topic but I was wondering which blog platform are you using for this website? I’m getting sick and tired of WordPress because I’ve had problems with hackers and I’m looking at options for another platform. I would be fantastic if you could point me in the direction of a good platform.

  77. May 21, 2011

    Thank you for give very good informations. Your web is coolI am impressed by the information that you have on this blog. It shows how well you understand this subject. Bookmarked this page, will come back for more. You, my friend, ROCK! I found just the information I already searched everywhere and just couldn’t find. What a perfect site. Like this website your website is one of my new favs.I like this info shown and it has given me some sort of commitment to have success for some reason, so thank you

  78. Nice post, some good examples, I personally don’t like them as it takes an absolute age to navigate through the darn things!

  79. June 1, 2011

    hands so it’s refreshing to come accross blogs such as yours. Keep up the good work.

  80. June 10, 2011

    Great list of sites/menus. This is now bookmarked!

  81. The mega menus look pretty cool. Yeah, I’ve seen a lot of new sites having mega menus and you’re right, this is the trend going on right now. The list at the top are pretty awesome, love the designs and they look pretty fresh and current.

  82. June 21, 2011

    Impressive. Thanks for sharing
    I am going to choose one of them. 🙂

  83. June 23, 2011

    Woo nice collection top site with MEGA menu, helpful for the freshers to start with. I decided to implement one in my site, thanks a lot.

  84. June 26, 2011

    Nice Collection.
    Thanks

  85. July 24, 2011

    just good

  86. July 27, 2011

    good collection, thanks!

  87. July 28, 2011

    Nice collection. The mega menus look pretty good. It shows how well you understand this subject. One of the best examples of this that I have seen is on the National Geographic website. I’ve been thinking of creating one of these menu’s. Thanks for the examples. Hope you to share me more about this cool collection.

Leave a Reply

Your email address will not be published. Required fields are marked *

Sticky (Fixed) SideNav Layout with CSS