Mega Menus: the Next Web Design Trend

Tweet

mega menusMega drop-down menus are a relatively new phenomenon but I predict they will be everywhere within six months.

Mega what?

Navigating large websites has always been a design problem. You could create a huge sitemap-like menu with links to every page, but it would become impossible to scan and grow increasingly large as more pages are added.

In general, designers choose either:

  1. a small simple menu that links to pages with additional navigation as you delve deeper (Sitepoint is a good example). These are easy to use and accessible, but multiple clicks can be required to reach the content you want.
  2. dynamic drop-down or expanding menus that allow visitors to reach most pages no matter where they are. Whilst this provides quick navigation, accessibility can be poor and those without JavaScript might never see some pages*.

(* CSS-only drop-downs are possible, but they do not offer mouse over/out latency or work in every browser … guess which one!)

Mega drop-downs are half-way between the two concepts and similar to the ribbon introduced in Microsoft Office 2007:

example from actionenvelope.com

(example from actionenvelope.com)

The features of a mega drop-down menu

Typically, a mega menu:

  • is a single drop-down that appears on hover
  • shows all the options in one large panel
  • groups options into related categories
  • uses icons or other graphics to help the user.

Why mega menus will become popular

There are several reasons why mega drop-down menus will become a mainstream feature of many websites:

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

Perhaps the most compelling reason: Jakob Nielsen approves of mega menus! The web usability expert is usually critical of most design widgets, but he thinks mega menus are a great idea and suggests designers try them to improve their website’s navigation.

What do you think? Will mega menus become ubiquitous? Are you using them already? Will you try them on your sites?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • essexboyracer

    http://www.johnlewis.com, one of the major UK department stores (and one which has so far survived the ‘crunch’), has used ‘mega menus’ for over a year now and it looks good, plus gives you an instant overview to whats available on ‘the 1st floor’ although I still find that I need several more clicks to get where I want. So what it does do is provide an instant overview to a casual visitor of the extent and depth of a websites content.

    I am more in favour of more compact dropline menus, such as those found on users.tpg.com.au superfish nav-bar style.

  • http://www.kellishaver.com/ KelliShaver

    Lowes.com just recently (well, within the past 6mo) moved away from their mega-menu to a more ocnventional drop-down navigation. Theirs was, however, very poorly implemented to begin with, so in that case, it was an improvement.

    I like mega, so long as it’s not enormously mega. However, I think they can actually create some accessibility problems (rather than solving them) if they don’t scale properly. I quite often enlarge the browser text when using my laptop and then most mega-menus just become a jumbled, unusable mess of overlapping text.

  • meh.

    this post is useless without an actual example.

  • http://www.wplancer.com banago

    That is true, I might come to mainstream soon. I find them sexy.

  • BrightBold

    I have to agree @meh. I found this post useful in that it pointed me to the Neilsen article, which gave a great description of mega menus complete with several sample screenshots. But for an article discussing such a “new phenomenon,” I didn’t feel the author gave us enough examples of this technique being used successfully.

  • SpacePhoenix

    I tried the action envelope example with javascript disabled (via the developer toobar in ff) and it defaulted to more “traditional” navigation. Has anyone tried it via a smaller device, eg a mobile phone or a psp? I think that accessibility could be a big issue on smaller displays with part of the mega menu going off-screen.

  • http://www.historycommons.org/ Black Max

    A different take on the “mega-menu” that I’ve been interested in lately is the “speaking block” nav menu. It doesn’t give you the gobs of links that the mega-menu does, but it serves something of the same purpose. Here’s a good example:

    Evan Eckard’s site

  • Ketira

    If you guys need an example of this, go to Gaia Online. They have this and have it working well for both IE & Firefox. But since it’s a given that you have Java, Flash & Shockwave plug-ins going on your browser (and kept up-to-date), I’m not sure if it’s a good example or not. But the menus work just by mouseover.

  • http://www.crearedesign.co.uk TomBradshaw

    I’ve noticed these large menus being used more and more. I’m thinking of trying to use these in my work, they’re great for navigating round an expansive site, using a minimal amount of space – Large menus work well particularly for online shops. There is a fix to get CSS drop-down menus to work in IE.

  • Jiggy

    One site that has been doing this for a while is target.com. If you look at it today, they even have promotion banners at the top of their mega menus.

  • mikemike

    It’s not the next web design trend. These large menus have been popular for years.

  • http://www.brothercake.com/ brothercake

    CSS dropdown menus have extremely poor usability – never use them.

    RE: the statement that mega menus “should suffer fewer accessibility problems” – can you qualify that statement – why should they?

  • http://www.brothercake.com/ brothercake

    Also (not a good start here) *none* of the examples given in this thread work from the keyboard, so none of them qualify as “good” examples.

  • http://www.optimalworks.net/ Craig Buckler

    RE: the statement that mega menus “should suffer fewer accessibility problems” – can you qualify that statement?

    Head over to Jakob’s article for details (link at bottom). Yes, it’s still possible to do a bad, inaccessible, mouse-only mega-menu. However, since it’s only one large pop-up, good implementations should have fewer issues with mouse positioning, keyboard events, latency, text sizing, etc.

  • http://www.brothercake.com/ brothercake

    He’s making worst-case comparisons in order to prove a point that he’s already decided is true – in other words, he’s choosing examples to fit his belief, not making an honest evaluation. Sure, a well implemented mega menu will suffer fewer accessibility issues than a badly-implement dropdown menu. But the inverse is also true.

    These menus do not inherently avoid any of the same accessibility issues. For example – only bad dropdown require the user to scroll; only bad dropdowns don’t scale properly with larger text.

    How many menus there are doesn’t make a difference to whether they’ll suffer accessibility issues. You don’t design and code each dropdown menu individually, do you? So if you got it right for the system in general, then each individual menu will be right too. Because after all – a mega menu is just a dropdown menu with different styling on the menu; that’s all it is – its not a different system, and it doesn’t inherently avoid any of the same accessibility issues.

  • http://www.brothercake.com/ brothercake

    If you want to make the general point that a system like this is easier to implement well, then I’ll accept that, but that’s all. Fundamentally, the argument that these menus inherently suffer fewer accessibility issues falls down when you compare them with a well implemented dropdown.

  • israelisassi

    1) What evidence is available to support the statement “the Next Web Design Trend”?

    3) “Why mega menus will become popular” is a list of features, not reasons that something will happen. To me, it’s like saying “do it because it’s cool.”

    2) I don’t like menus that pop-up, or anything else for that matter, just by moving my mouse over it. Sometimes I move the mouse cursor out of the way to read something and get annoyed when a window or menu pops up covering what I was trying to read.

  • sitehatchery

    Mega menus would be hard to implement with most content management systems. I don’t know of any content management programs that will handle this – multiple columns, possible brief descriptions, and icons on navigation items – automatically without some level of customization. Because of the relative difficulty in implementation, I don’t think they will become as popular as this post suggests.

  • http://www.sinthuxdesigns.com sinthux

    How could you claim something small like a modified dropdown as a new web trend? It’s just an example of people getting creative with their dropdowns, by combining a sort of sitemap within them.

    Most sites shouldn’t even need this. Unless you’ve got a bunch of pages (ex. shopping cart, social networking), then you probably won’t need this. Which is why there isn’t an abundance of people using this style of dropdown menus.

  • m3talsmith

    They can look nicer too. Click on the “Guides Index” http://guides.rubyonrails.org/ for an example.

  • sitehatchery

    sinthux, I agree. It would be ridiculous to show this if you only had five or even 10 sub menu items.

  • fproof

    For a better argumented read on this topic, go to the Smashing Magazine site. Last week they posted an article “Designing Drop-Down Menus: Examples and Best Practices”.

  • Tom

    Yeah these menus are brand new…..2 years ago. Way to b on top of things Sitepoint.

  • Ed

    Can they work with left side nav bar? Has anyone seen this. Please post websites.

  • http://www.jasonbatten.com NetNerd85

    Now I have the right solution for my website redesign, cheers!

  • Will

    HoverIntent is cool, but I am torn as to whether or not I should make the user wait .5 sec until the menu displays. I understand that Mr. Neilsen has recognized ‘flickering’ can be an issue; however, I contend that users that can see it flicker are likely to adjust their browsing habits anyway. I especially think otherwise if your menu items display a downward arrow or indicator that a submenu is present to make the user wait, because they may not be entirely sure it works.

    On my website, I use an AJAX request to add the menu to page, so 1) people using assistive browsers will not have to deal with menu and can simply go to the url of the heading, 2) it simplifies markup, 3) (since our current site is in dreamweaver templates) it makes maintenance far easier, 4) they are easy to customize with CSS, and 5) the jQuery functions needed are incredibly simple!

    Since my site is php powered, I can also generate menu contents on-the-fly!

    My Menus plugin for jQuery

    var activeMenus = [];
    $(document).ready(function(){
    /**
    * @author William Jaspers
    * @copyright NONE! Use it all you want!
    *
    * In this instance, the navigation bar at the top
    * of the window is an unordered list,
    * and the side navigation is a definition list.
    *
    * Top menus utilize an id on each list item, where as
    * sidemenus utilize a name on each list item.
    * You are welcome to modify this code to suit your needs.
    *
    */
    /* TopMenu - call the ajax request only once!
    -------------------------------------------------------*/
    $('ul#menu>li').one('mouseover', {},
    function()
    {
    var id = $('a[id]',this).attr('id');
    if( typeof id == 'undefined' ) return;
    $.get( '/menu/'+id,
    {},
    function(data)
    {
    $('#'+id).after(data);
    },
    'html'
    );
    }
    );
    $('dl.menu>dd').one('mouseover', {},
    function()
    {
    var name = $('a[name]',this).attr('name');
    if( typeof name == 'undefined' ) return;
    $.get( '/menu/'+name,
    {},
    function(data)
    {
    $('a[name="'+name+'"]').after(data);
    },
    'html'
    );
    }
    );
    /* Apply the menu on load.
    -------------------------------------------------------*/
    $('ul#menu>li').hover(
    function()
    {
    $('.submenu',this).slideDown(350);
    $(this).addClass('sfhover');
    },

    function()
    {
    var s = $(this);
    if( m = $('.submenu',this) )
    { $(m).slideUp(350); }
    $(s).toggleClass('sfhover');
    }
    );
    $('dl.menu>dd').hover(
    function()
    {
    $(this).addClass('sfhover');
    },

    function()
    {
    $(this).toggleClass('sfhover');
    }
    );

    //EOF
    });

    CSS for my menus


    ul#menu,
    ul#menu li
    {
    float: left;
    padding: 0;
    margin: 0;
    list-style-type: none;
    }

    ul#menu li a.link
    {
    display: block;
    padding: .5em .25em;
    margin: 0 1px;
    }

    ul#menu
    {
    margin: 2.5em 0 0 5px;
    }

    ul#menu li div.submenu,
    .menu dd .submenu
    {
    visibility: hidden;
    position: absolute;
    display: block;
    }

    ul#menu li.sfhover div.submenu,
    .menu dd.sfhover .submenu
    {
    visibility: visible;
    }

    .submenu
    {
    margin: 0;
    padding: 2px 1px;
    }
    .submenu dl
    {
    float: left;
    clear: right;
    margin: 0;
    padding: 0;
    width: 10em;
    }
    .submenu dl dd
    {
    margin: 0;
    padding: 0;
    display: block;
    }

  • miles

    these “mega menus” are ugly. ill let the bandwagon pass me by on this one

  • Denny

    I’ve used JavaScript “mega menus” for two years and have had excellent results. (http://williamsport.com). I used a prodfuct call All Web Menus from Likno.com. The drawback has been that some shopping categories are too long for a screen forcing you to create a “more” menu entry. They just came out with version that executes the multiple column look very well and best of all it can be dynamically generated from a DB (important to me). For pure css based menus I like web assist but for JavaScript I like Likno. Both have an easy to use GUI but web assist isn’t dynamic yet. I’m trying to create the web assit look now in Likno!

  • http://www.katzenbergdesign.net Katzenberg

    same information from Germany: we have been seeing those menus for quite while now but i agree: the usability is really good if impemented nicely. If you want to see a full screen menu rollout visit http://www.grueneerde.com. Even though the amount if information is huge it helps to get a nice overview about what they have to offer.

  • triomatt

    Man, quit flaming people for semantics and just put your two cents in about whether or not these menus are a step in the right direction. Without providing documented evidence to support my case, I still think they are appropriate for sites with very deep content, like the target.com example. The solution should fit the content and overall goals of the site design.

  • http://www.18aproductions.co.uk lisaanne

    Katzenberg – wowsers! Thats is a huge amount of information to have in a menu! http://www.cosmopolitan.co.uk/ has had one for quite a while and I like the draw in other recent relavent articles possible by the extra space. It used to be annoying with appearing at the wrong time etc, so I think their guys have been working on it and making worthwhile tweaks.

    I agree with SpacePhoenix though – for phones any menus/options with small text can be a nightmare to navigate. So plenty of padding/nice layout would be essential.

  • Gilzow

    The problem as I see it, is that there will be a multitude of people who run out and design a horribly implemented, non-accessible mega-menu (sitepoint’s example is a good example of this) because Jakob Nielsen “approves of mega menus”. Then the first time someone points out that they arent accessible (i’ll point again to sitepoint’s mega menu example) they’ll respond “But Jacob Nielsen said they are ok!”

    Every designer should be forced to try and use their site without a mouse so that they truly understand what constitutes a truly accessible website.

  • Ben M

    I am generally just not a fan of drop down menus whether they be small or mega. I don’t understand why a user can’t just click on the paper tab, as per the site point example, and then see all of the relevant sub categories. The idea of having a user navigate through your menu defeat the purpose of a having a properly structure homepage and good information architecture. If this was the best solution then why would you not just have a menu on the homepage of your site and leave all of the real content to the the secondary pages. If you are asking your users to one take in your home page and then two figure out where to go through an almost mini site structure in your menu I think is bad. I feel that they end up competing with each other. Good simple IA always solve the need for drop downs of any sort.

  • Danny San Diego

    I can’t believe with all the talk of mega menus, none of you have mentioned that hands down best execution of one! The scripps family of websites has this style on lock (foodnetwork, hgtv, etc). One of my favorite websites is http://www.foodnetwork.com and they have done a fantastic job building theirs out.

    What I particular love about the implementation of their mega-menu is the fact it doesn’t appear to be a drop down of the main nav element, but rather a floating div that houses the content. What I also like is the option to close the pop-up panel. If any of you are looking for an example to emulate, that would be on the top of my list.

  • http://www.brothercake.com/ brothercake

    Yup, I entirely agree. Classic case of a little learning being a dangerous thing.

  • Ric

    Gilzow, you’ve made a very valid point. Nielsen should mention that the mega menus should work without CSS and JavaScript, but focuses more on the features of these menus. Your mega menu example, however, is not a good one for your argument. It is actually a good example of one that works without JavaScript and CSS (you must disable both – it will not work with CSS and no JS). I don’t know how you found it and I don’t know why Craig Buckler did not include it as an example in this article, but I’m glad that you referenced it.

    The examples that Jakob Nielsen provides, however are poor. The Food Network mega menu does not work when both JavaScript and CSS are disabled (only the top menu items are available). This self-professed usability expert has some good ideas, but we as developers should take his opinions with a grain of salt and apply them with our expert technical knowledge to make sure that they are accessible.

  • SilverSearcher

    One of the best and most nicely implemented i’ve seen: http://www.emc.com (once you click through the region)

  • http://www.brothercake.com/ brothercake

    Menus not working when scripting is disabled is the best-practise approach. You degrade back to plain links which lead to sub-index pages that list the content which was available from the submnues.

    Acccessibility does not necessarily mean that everything is available to everyone; it’s about providing *equivalence*, not equality.

  • Tim Reeves

    I’ve been using pure CSS Flyout / Dropdown Menus successfully for some time, which display perfectly in ALL modern browsers including IE6. I got the basic tricks from Stu Nicholls website: cssplay.

    Since they work fine, multi-level, as flyouts or dropdowns, whereby each level can be styled separately, I personally see little need to sacrifice accessibility and move to JS Mega-Menus, except perhaps for the latency effect. One could still add a JS latency to Stu’s menues and they would still work in degrading mode, just without latency. I have done something similar by adding a color flow to the background of the menu slots on mouseover, german speakers can read more and download it here: colorflow

  • Xarr

    Jacob Nielsen writes about menu which appears after hover. How about ones which appear only when you click on the menu element?

    What do you think?

  • memco

    Thanks for the article. I think they’re not as magical as the article claims, but I actually think I found a way to handle a rather large site I manage a little more effectively (assuming I can tame the accessibility issues).

  • Anonymous

    I think next web design trend will be dam good.
    -The homepage should include a summary of what products
    your site has to offer. Customers can always delve deeper
    into your site for more information.

    Our

    Website Design Company

  • Tim

    Microsoft has had these menus on microsoft.com and msdn.com for close to 10 years now. It became a necessity for them considering the huge array of information they are trying to publish for developers, and number of subsites they have from their main home page.

  • Ankrum

    Will,

    You say: “Since my site is php powered, I can also generate menu contents on-the-fly!”

    Could you please give the url of your site?

  • web development DC

    Well i must use Mega Menus in my next web design project.
    i like this very much

  • 27stars

    Liking the mega-menus – I think if you have the right kind of content it works very well, and that overview of content is very user friendly and time-saving for e-commerce sites :)

  • Fredy

    Mega-menus do provide better navigation options, I’ve seen them on many websites, and some of them seem really nice.

    Thanks for the post.

    Web Design Quote.

  • http://www.vestefr.com/ veste

    this is a nice post,thank you for sharing,