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:

Steven Snell

Stephen Snell is the owner and editor of Vandelay Design. Connect with Stephen on google+

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

  • Pingback: 25 Examples of Mega Menus in Web Design « Badurally’z Blog()

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

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

  • Awesome menu styles, Have to plan for one.

    Thanks
    Sankar

  • Nice list! Thanks for the post!

  • SD

    How about the Ikea website menu?

    There are some good ideas in here. Thx 🙂

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

  • toongimp

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

  • Pingback: 25 Examples of Mega Menus in Web Design | Squico()

  • Pingback: LISTDUB» 25 Examples of Mega Menus in Web Design()

  • ‘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.

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

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

  • 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!

  • 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

  • Pingback: 25 Examples of Mega Menus in Web Design | Design Newz()

  • 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!

  • NicoleB

    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.

  • Pingback: BlogBuzz August 8, 2009()

  • Pingback: MacDaddy Links of the Week: Aug. 2-8 | bkmacdaddy designs()

  • craig

    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.

  • Pingback: Bluewire Media Web Design Blog » Blog Archive » Weekly round-up()

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

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

  • Pingback: * 25 Exemplos de “Mega Menus” - Top of your Mind()

  • Pingback: Monthly Mother Lode of MacDaddy Links: August 2009 | bkmacdaddy designs()

  • Pingback: Monthly Round Up: 56 Inspiration and Showcase Articles @ Designussion()

  • great examples, will consider them in the future

  • web

    really cool stuff

  • Pingback: Drinking From The Firehose – Design Inspiration August 2009 « Pushing Pixels()

  • hotmac

    Btw: RAMPAGE does not have any MMs anymore…

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

  • Pingback: Websitenavigatie: denk na over plaatsing, weergavestijl en interactie - Frankwatching()

  • DJ FatSkank

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

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

  • Bob

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

  • 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

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

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

  • 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

  • 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

  • Alan

    Nice examples
    Don’t forget

    butik.dk
    expansys.com

  • Impressive collection, really inspirational and very useful – Thanks

  • sheela

    very much useful

  • not a fan of large menus…

  • brikola

    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

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

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

    Thanks
    Shovan

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

  • 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?

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

    Thank you so much for great example.

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

    Thank you so much for great example.

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

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

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

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

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

  • Fantastic collection, thanks!

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

  • Nic 1 😉

  • very nice design.
    thanks for sharing.

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

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

  • 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…

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

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

  • 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

  • nice menu. The menus are awesome, nice Design.

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

  • 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!

  • Hi Nice post

    Thanks for the post

  • 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!

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

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

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

  • y8

    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

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

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

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

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

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

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

  • Nice Collection.
    Thanks

  • just good

  • good collection, thanks!

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