25 Examples of Mega Menus in Web Design
By Steven Snell | August 4th, 2009 in Inspiration
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.
For more design inspiration, please see:
43 Responses from Readers
oooh nice. I need to do something like this on a wordpress site.
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.
Awesome menu styles, Have to plan for one.
Thanks
Sankar
Nice list! Thanks for the post!
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.
A few of these look clean and all but make site functionality terrible. I’ll use my common sense if I were you lot.
‘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.
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
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!
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.
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.
Thanks, I was considering doing something similar for our client list.
Mega Menus are definitely on the rise. I think they are awesome!
great examples, will consider them in the future
really cool stuff
Btw: RAMPAGE does not have any MMs anymore…
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.
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
Trackbacks