Dr StrangeUX or: How I stopped worrying and learned to love the mega-nav

What’s a mega-nav? If you haven't heard the name before you’ve probably seen examples of them in some larger sites. Essentially a mega-nav is one of those large site navigation panels that fly out from a top level navigation bar to provide a clearly mapped out view of important site content.

For any site with many products, features or a whole lot of content, mega navs likely provide a UX advantage over the normal drop-down style menu in that:

• mega-navs give clearer access to the sitemap by displaying many options at once,
• mega-navs provide efficient hierarchal grouping and organisation of menu items,
• mega-navs can utilise visual elements/icons and pictures and
• mega-navs enable less user reliance on navigation path memory/learning.

But that’s only if you get them right. There’s a number of opinions online lamenting the difficulty caused by mega-navs and many of these posts make a good point and have been valuable in showing what to avoid if you’re considering implementing your own mega nav solution.

Imagine you’re on a top level navigation item, find what you’re looking for at a secondary level and move towards that item only to have it disappear in front of your eyes. Try again, same thing happens. Disappointing, frustrating, can’t really be bothered anymore. It’s one of the biggest problems with mega nav UX and getting it right is important.

The better mega-navs out there do a good job of intuitively sensing mouse direction/intent and ensuring that the item you’re about to click remains an option until you get there. The better mega nav examples out there also use transition timing to control the behaviour of the mega-nav throughout user interaction. Getting the timing of transitions right when users move around on the mega nav avoids annoying flickering effects as menus fly out and disappear or are replaced as the user mouses over, opens and explores the menu.

So when you’re making UX decisions as to whether the mega nav is right for your site, think carefully about the pros/cons as well as the implementation and the user experience that your mega-nav provides. Your mega-nav should do the work for you and your users. Not the other way around.