What's the Deal with Mega Navs?

When you want to pack a lot of content in a prominent place on your site, Mega Navs often seem like the ideal solution. But before you make that decision, there are a few things you need to consider.

I’ve been working at Echidna for just over five years, and over the course of that time, I have been tasked with creating a slew of what people refer to as Mega Navs. If you don't know what these are, essentially they are menu dropdowns that take up the majority of the screen when active and house an assortment of content associated with that menu section.

In most cases this means a sub-section of the sitemap in each of the dropdowns, but in other cases the dropdown can also contain images or descriptive text pertaining to the top-level menu item you hovered over or clicked on.

Sounds like a great concept, right? It can be. But before you settle on the idea of a mega nav, let me outline some questions you should ask yourself first. I’m not advocating one way or the other, but I find that having good answers to the following questions helps lead people to the best decision for their content.

Will Your Users Have Somewhere to Land?

When you have top-level menu items, displayed in a mega nav, are they going to go somewhere? If so, that requires content. Some clients think of these top-level menu items as “buckets” where you can house related content -- but you need something to describe the bucket. Basically, you don’t want to have landing pages that are just a single paragraph followed by empty space.

Ask yourself, “Do I have enough content for a landing page?” This is the first question you must ask, as its answer will contribute to many other decisions down the road.

You need something substantial for these top-level items: a list of sublinks and a short blurb providing context; ideally, more dynamic blocks of content pertaining to the menu section.

And consistency is important. You don’t want to have content for only two of five top-level pages -- that just makes for a bad user experience where some items you can click on and others you can’t. It’s landing pages for all, or none at all!

Click or Hover?

The answer to your first question now plays into how you respond to the second. Should your mega nav dropdowns open on a mouse click or should they open on a mouse hover.

I honestly don’t know if there’s a right answer and this question has been debated since time immemorial. However, if you decided (in question one) on having landing pages, then you will likely want to open the menu dropdown on hover, so that you can then instead click to visit the landing page -- where you will ideally have a plethora of intriguing information.

If you're using hover make sure you add some delay in there using a CSS transition or one of the hover intent javascript libraries (my favourite hoverInent jQuery plugin) so as not to induce whiplash as the user inevitably scrolls briskly from left to right and back again on your top level nav items.

I feel like in most cases we end up going with "hover" instead of "click,” but that often leads to questions about mobile navigation. If you can't hover on the top level items with your finger on your phone, then how do you pop open that dropdown? And if I can only click it, then it will take me to the landing page, so there had better be something useful there.

See it's all cyclical... One more big consideration to discuss, then we can talk about moving this bad boy into a hamburger (responsive nav).

How Deep is Your Nav?

You’ll want to consider how many levels of navigation will show up on your mega nav? Put another way, how many menu links would a menu link link if a menu link could link menu links?

It's not uncommon for the client to want their entire sitemap to be accessible via a link in their mega nav. Aside from the obvious complications that will arise when shoving this into the proverbial burger, accommodating enough space for this on the desktop mega nav can be a challenge on its own.

Say a client insists on showing all the child menu links, and their children, and their children's children. Now you're working with four levels of menu items including the top level. Say all these links add up to around 40 links per mega nav dropdown. You need to get all of those inside your dropdown and maintain their parent/children/grandchild relationship. Most of us will end up going with some sort of three-column layout for their mega nav container, but it can get difficult to maintain the hierarchical relationships when dividing them into columns, so you may end up with some weird white space in your dropdown.

Another thing to consider when opting for the three-column layout in your dropdown is the length of the menu links themselves. French translations usually result in longer text, you’ll you need to keep that in mind if your site is multilingual. You may have to play with your line heights or get creative with your hover states so people realize that, sometimes, what appears on two lines is actually the same link.

Anyways, your head is exploding already, but then try putting that in the burg. Let's talk about mobile.

How Will it Work on Mobile?

Responsive mega navs can open up a whole 'nother can of worms. Based on your prior shots called, you now have to convey all the same information for people on their mobile device.

If you decided not to have landing pages, then it's pretty straight forward -- each of the top-level menu items opens an accordion section with all child links underneath. Which is fine, unless your accordion exposes that whole family tree of 40 links -- forcing users to scroll and scroll and scroll, four times the height of their phone in pixels to find the link they were looking for.

If you decided on landing pages, then you have options. The first question in this scenario is, “Do the top level landing pages contain enough useful information and an alternate way to navigate to all the subpages?” If that's the case, then maybe you only need the top-level nav items in the burger since people can get to all the sub-content from links on the landing page. This is my favourite, but it’s not always the agreed-upon solution.

If that solutions isn’t for you, then you likely need to have some nesting of accordions in the burger. There are a few options here: the split button, the home link, or the two-click.

• Split Button: have the top-level item clickable (or touchable) and then, in a squared off area beside the title of your link, have an arrow pointing down showing users that there is more content below if you expand this top level. The problem here is if you don't make it obvious that the arrow can be clicked users will just keep ending up on your landing page. Also, some people (not naming names) have fat fingers, so they may get all flustered when they can't click your little arrow;
• Home Link: click the menu title to expand your top level, then underneath you insert a Home link indicating that you can click on that to go to the landing page of that menu section. This approach is OK, but if you have a nav that goes four levels deep you end up with all these home links everywhere, it looks disorganized, and can feel like a choose-your-own-adventure maze;
• Two-Click Option: This probably shouldn't even be discussed, but basically the user clicks the top level item once to open the sub-menu, then again to visit the landing page. Without a very clear indicator nobody will think to click the same thing they already clicked on.

Undoubtedly, there are other options there as well, but I haven’t covered them in this list.

Conclusion

While I realize this blog hasn't really provided any concrete do's and don't's, the thing is there really is no one-size-fits-all answer. It all comes down to your needs and your content -- and, most importantly, the needs of your site users.

In my opinion the more complicated mega navs usually involve decisions made by clients with an intense knowledge of their content and website structure. However, in reality, someone coming to your site for the first time is not going to pop open every mega nav dropdown and read through their options to find the exact page they’re looking for. Keep your audience in mind before you make something too complicated.

A better alternative to an bloated mega nav is a good SEO presence, a robust site search, and a simplified navigation. Chances are if people know what they are looking for they will head straight to Google first anyways. And if that doesn't return what they want, they will likely try your site's search page (which ideally has some handy filters for advanced searching.) Finally, if that doesn't work, hopefully they will spend some time starring in bewilderment at your mega nav before giving up all hope in the internet.