A Trend of Multi Column Mega Drop-down Menus with 30 examples!

The Navigation Menu plays a key role in any website, either it is a drop-down or a simple one. Its ok for small sites with 5 to 6 menu items, you will have more options to present the menu with better navigation by giving good look and feel by taking the latest web trends & usability into consideration.

But what if you have a huge portal or a site with lots of content to feature to the visitors of your site? That’s the first and main question comes to every designer and developer before they plan to develop a website. It’s the same case with me – I always dig into different kind of sites like magazine, news, huge portals etc. to find how others are giving better navigation – the different ways/approaches to present the menu by highlighting their key sections/parts of their site.

A Trend of Multi Column Mega Drop-down menus with examples!
A Trend of Multi Column Mega Drop-down menus with examples!


Few consider drop-down menus with very informative text or tool-tips, few wants to have it as just a simple drop-down list menu (some call it as light-weight menus) and some wants to highlight the related featured content in a drop-down menu as a grid or column based along with their regular menu items – which we call those huge menus as the Mega drop-down menus or Mega Drop-Down Multi-Column Menu or Informational Navigation or simply the  Mega Menu etc.

The Mega drop-down Menus became the latest trend in web sites and I guarantee you those are really the best approach to highlight best content available in a web site before one wants to enter into that particular section and matters a lot in terms of Usability and User Interface. By considering this Mega drop-down menus one can easily showcase the popular content and can save the layout space and can use the space for highlight some other parts of their site, yeh it depends on how you lay it out – that’s where the usability comes into picture.

What is that we should consider for a best Mega drop-down menu with cool User Interface and having more Usability:

  1. Should be clean with less main menu items
  2. Menu with Informational messages, use Tool-tips if you are using short text or abbreviations in menu items
  3. Typography
  4. Breathing Space
  5. Menu Items with related Icons or pictures
  6. Differentiating the menu items with Sub-Menus or Sub-Headings or column headings
  7. Either it could be a horizontal, vertical or floating menu – based on what the site demands
  8. Easy and Fast to use – finally usability matters
  9. Most Important – should be Browser compatible

Many won’t consider drop-down menus, they are most worried about blocking JavaScript and some users might not understand that a particular menu has got more links to check etc., means poor presentation. And many feel if they use drop-down menus it won’t be SEO optimized etc. There is nothing like that, now Google bot even grabs the JavaScript based and hidden content.

If you observe we have a multi-column drop-down menu, but I won’t consider it as a Mega drop-down menu because as I mentioned above mega menus are more informational and with related featured content in the drop-down. If you want to build the Mega drop-down menu, you could consider our Pure CSS and browser compatible Multi-level Multi-column Multi drop-down Menus with pure CSS to start with (which is available for download) and for your info daily at least a minimum of 50 people are downloading this menu and I am proud about it :).

Multi-level Multi-column Multi drop-down Menus with pure CSS
Multi-level Multi-column Multi drop-down Menus with pure CSS

And here are few best and more user-friendly approach towards Mega Menus:

Multi Column Mega Drop-down menus with,

Informational and related featured content:

Reuters.com

Business & Financial News, Breaking US & International News | Reuters.com
Business & Financial News, Breaking US & International News | Reuters.com

Asylum.co.uk

Asylum | Men's Lifestyle | Humour, weird news, sex tips, fashion, dating, food and gadgets
Asylum | Men's Lifestyle | Humour, weird news, sex tips, fashion, dating, food and gadgets

Bnet.com

BNET Today | Management, Strategy, Work Life Skills & Advice for Professionals
BNET Today | Management, Strategy, Work Life Skills & Advice for Professionals

TheDailyBeast.com

The Daily Beast
The Daily Beast

AccessHollywood.com

Access Hollywood
Access Hollywood

Omg! – Omg.Yahoo.com

omg! Celebrity gossip, news, photos, babies, couples, hotties, and more - omg! on Yahoo!
omg! Celebrity gossip, news, photos, babies, couples, hotties, and more - omg! on Yahoo!

GigaOM.com

GigaOM
GigaOM

EA.com

EA Video Games - Electronic Arts
EA Video Games - Electronic Arts

GoDaddy.com

Domain Names, Web Hosting and SSL Certificates - Go Daddy
Domain Names, Web Hosting and SSL Certificates - Go Daddy

MSNBC

Breaking News, Weather, Business, Health, Entertainment, Sports, Politics, Travel, Science, Technology, Local, US & World News- msnbc.com
Breaking News, Weather, Business, Health, Entertainment, Sports, Politics, Travel, Science, Technology, Local, US & World News- msnbc.com

GuitarHero.com

Guitar Hero
Guitar Hero

Aviary.com

Aviary.com
Aviary.com

Multi Column Drop-down with list based approach:

DeviantArt.com

deviantART: where ART meets application!
deviantART: where ART meets application!

Salon.com

Salon.com
Salon.com

WhiteHouse.gov

The White House
The White House

MTV.com

New Music Videos, Reality TV Shows, Celebrity News, Top Stories | MTV
New Music Videos, Reality TV Shows, Celebrity News, Top Stories | MTV

Republic.co.uk

Republic : Men’s & Women’s Fashion, Clothes, Jeans, T-Shirts, Dresses from Top Brands
Republic : Men’s & Women’s Fashion, Clothes, Jeans, T-Shirts, Dresses from Top Brands

ActionEnvelope.com

Buy Envelopes - All Sizes, Styles, and Colors - Printed or Plain - ActionEnvelope.com
Buy Envelopes - All Sizes, Styles, and Colors - Printed or Plain - ActionEnvelope.com

MTVU.com

mtvU | College Music, Activism, Shows and Activities On Campus
mtvU | College Music, Activism, Shows and Activities On Campus

CBS.com

CBS TV Network Primetime, Daytime, Late Night and Classic Television Shows
CBS TV Network Primetime, Daytime, Late Night and Classic Television Shows


NPR.org

NPR : National Public Radio : News & Analysis, World, US, Music & Arts : NPR
NPR : National Public Radio : News & Analysis, World, US, Music & Arts : NPR

REI.com

REI - Gear, Equipment and Clothing for a Lifetime of Outdoor Adventure and Stewardship.
REI - Gear, Equipment and Clothing for a Lifetime of Outdoor Adventure and Stewardship.

NorthernTool.com

Portable Generators, Welders, Pressure Washers, Power Tools | Northern Tool + Equipment
Portable Generators, Welders, Pressure Washers, Power Tools | Northern Tool + Equipment

LittleKidsBedrooms.com

Little Kids Bedrooms :: Children's Bedding and Bed Linen for Boys and Girls Rooms
Little Kids Bedrooms :: Children's Bedding and Bed Linen for Boys and Girls Rooms

OfficeDepot.com

Office Supplies: Office Products & Office Furniture at Office Depot
Office Supplies: Office Products & Office Furniture at Office Depot

HouseOffraser.co.uk

Buy designer clothes, home and beauty brands from House of Fraser
Buy designer clothes, home and beauty brands from House of Fraser

FoodNetwork.com

Food Network - Easy Recipes, Healthy Eating Ideas and Chef Recipe Videos : Food Network
Food Network - Easy Recipes, Healthy Eating Ideas and Chef Recipe Videos : Food Network

Menu Drop-down as forms:

OfficeMax.com

Office Supplies, Office Furniture & Office Technology at OfficeMax
Office Supplies, Office Furniture & Office Technology at OfficeMax

Twitter.com

Twitter.com
Twitter.com

Boxee.tv

Boxee.tv
Boxee.tv

Tutorials:

Build Multi Level Multi Column Multi Menus with pure CSS (Cross Browser Compatible)
Mega Drop downs with CSS and jQuery
My first jQuery plugin for Big Ass Menu
Cut & Paste jQuery Mega Menu

Interesting articles on Mega drop-down menus:

Mega Dropdown Menus
Designing Drop down menus examples and best practices
Mega Drop-down Menus
Mega Drop-down menu – Enjoy it responsibly
Mega Menus – Designm.ag

I hope you found this article useful, if so why not show some love and spread it. Leave your thoughts and opinion on approach towards Mega Menus and if you find any related interesting article, please share the same.