When to Use (and Not Use) a Mega Menu for Navigation

If you’ve shopped online, there’s a good chance you’ve navigated a mega menu.

This is a huge menu with links to a variety of sections and subsections of a site. They’re popular in sites with large amounts of content, particularly retail sites.

If you’re running an online store or another site with a lot of links for people to navigate their way through, it can seem like a mega menu is a no-brainer. But is it?

In this article, I’ll look at some of the scenarios in which a mega menu will enhance your site, and those in which it won’t.

What is a Mega Menu?

A mega menu is a kind of navigation menu that makes all the options visible as once, laid out horizontally as well as vertically. Sometimes they’ll be split into sections, sometimes not.

An example is this menu on the Amazon UK website, which takes up the entire screen:

But on the US site, Amazon doesn’t use a mega menu, but a standard drop-down navigation menu instead:

Which just goes to show that mega menus are not always the answer!

Mega menus tend to have:

• one or more big panels divided into groups of navigation options
• navigation choices structured using layout, typography, and (sometimes) icons
• everything visible at once so users don’t have to scroll or click on submenus.

Mega Menus and User Experience

The main principle behind using a mega menu should be the answer to one simple question:

Does a mega menu make it easier for people to navigate around my site?

You shouldn’t just add one because they’re the latest cool thing. The addition of a mega menu to your site should take into account user experience (UX). If your mega menu will make the navigation process smoother and more intuitive, then add one. If it won’t, or you just don’t need that many items in the menu, stick to a regular drop-down menu.

Another question you might want to ask yourself when deciding whether to use a mega menu is this:

Will a mega menu help my website meet its objectives?

You might be thinking this is a vague question and one that it’s hard to answer, but all aspects of your site design and content should relate back to what your website is trying to achieve. This could be one of a number of things:

• to sell products online
• to encourage people to contact you to buy your services
• to grow a following
• to promote a charity
• to create a community
• to get subscribers
• to sell tickets to events.

I’m sure there are plenty more objectives a website could have, but these are some of the most common. Understanding yours will help you to know exactly which pages in your site you want users to visit in order to achieve your objectives.

So if you want people to buy products online and you have a large and complex store, a mega menu may well be the way to go. But if you have one very specific product or service and you want to funnel people into the sales page for that, then a mega menu could be a distraction. 

Before you decide whether to add a mega menu, take the time to consider what you want your website to achieve, where in your site you want to encourage visitors to go, and what kind of navigation is going to encourage them to do that.

Below are some specific examples of when a mega menu might enhance your site.

When to Use a Mega Menu

Let’s take a look at some scenarios when mega menus are a useful addition to your site.

1. When Users are Expecting One

If your site is a retail site, then users will be accustomed to seeing mega menus and using them to navigate the departments of the store.

For example the John Lewis site shown below uses a different mega menu for each major section of the store. The one below is for the women’s clothing section:

People are accustomed to using mega menus in the websites for large department stores like this, and won’t be confused by it. If I visit the site looking for a dress, for example, I can easily go to that section of the site with one click.

2. When a Drop-Down Menu Would be Too Large

In some cases, a drop-down menu, or a series of them, would contain so many options that it would detract from UX. 

Jakob Nielsen and Angie Li did a study showing that for large navigation menus, mega menus enhanced UX compared to drop-down menus. This is because a drop-down menu with lots of content will require the user to scroll down or sometimes scroll down and then back up again. This takes longer, puts more strain on short-term memory and can be confusing.

So if your site needs to have a lot of elements in the navigation menu, a mega menu may well enhance UX. But make sure that if you do use one, you structure it in a way that’s intuitive for users and that you use design cues such as colours, text effects and fonts to make it easy to browse.

The Game website below is a good example of a series of mega menus, each one relating to a section of the site. These have used spacing and text effects such as bold text and backgrounds to make the menu intuitive and easy to navigate.

3. When The Design of the Menu Enhances The Site

Sometimes you have the opportunity to add more than just text links to your website.

The Moleskine site, shown below, has a mega menu with a difference. In addition to the text links, it has photos of a few key products, which act as links along with the text overlaying them.

This encourages the visitor to go to those pages and makes the mega menu more than just a functional aspect of the site—it enhances the design and helps meet sales objectives.

When Not to Use a Mega Menu

There will be times when you shouldn’t use a mega menu. Here are some examples.

1. When You Don’t Have Lots of Links

If your site doesn’t have hundreds of pages, then a mega menu will be overkill. For the average small business site or blog, a mega menu will just confuse visitors—and it will look pretty empty, too.

The Envato Tuts+ site uses a combination of mega menus and normal drop-down menus. For those sections of the site which don’t have a lot of links, a normal drop-down menu does the job and covers up less of the page:

2. When Your Home Page is Nothing But Links

If your homepage is just a page full of links to subpages, then you don’t need a mega menu as well.

An example of this is the UK Government site, which has a page full of links as its homepage:

Once you navigate further into the site, there’s a left-hand navigation menu which can be expanded:

This is also a good example of not using a mega menu in a context where users might not be expecting it. Mega menus are less common in public sector websites than they are in retail, for example.

3. When You Want to Funnel Visitors to a Specific Page

Sometimes your site will be designed to sell just one or two products or services, or to encourage signups to a mailing list.

If that’s the case, you may well have a banner on the homepage directing visitors to a landing page.

In cases like these, you want to keep navigation minimal. A mega menu will give visitors so many options that they’ll be far less likely to visit the page you want them to. So keep your navigation to a minimum and focus on funneling visitors into your landing page.

The Social Media Examiner site is a good example of this. Right now, they want visitors to do one of two things: to sign up to their mailing list, or to buy a ticket to their conference. The banner reflects the second of these and the call to action that takes up the top section of the homepage reflects the first.

If they gave visitors a big mega menu it would reduce the chances of them doing one of those two things, so they keep navigation simple instead.

4. On Mobile

It’s going to be difficult to create a mega menu that will be legible on a small screen. To make it work you’d have to either make the links tiny, which means people wouldn’t be able to tap them, or introduce scrolling. Combining a mega menu with scrolling can be confusing as it’s difficult to know where the mega menu ends and the page content begins.

It’s better practice on mobile to use a burger menu: a menu which is invisible until you tap on a symbol for it. It’s often referred to as a burger menu because of the symbol: three vertical lines look a bit like a hamburger.

The John Lewis site featured above has a menu like this. Tap the symbol and menu options drop down beneath it.

Adding a Mega Menu to Your Site

If you’ve decided that a mega menu is the right option for your site, the easiest way to add one is via a plugin.

CodeCanyon has plenty of mega menu plugins for you to choose from. Some of the most popular are:

• UberMenu is the top selling mega menu plugin. It lets you create a fully customised mega menu for your site. It includes CSS selectors to help you design a great-looking mega menu with fonts and text effects, and has multiple layouts.
• Mega Main Menu lets you place a variety of object types into your menu. So if you want images like the Moleskine site above, this could help.
• Hero Menu is designed to be easy to use and will help you get a mega menu up and running in minutes, with a drag-and-drop menu builder.

For more inspiration for creating your mega menu, you might want to check out these other posts on Envato Tuts+:

• 
  WordPress
  UberMenu and 7 Other Best Mega Menu Plugins
  Jane Baker
• 
  Theme Development
  How to Integrate a Bootstrap Navbar Into a WordPress Theme
  Kateryna Belyaeva
• 
  WordPress
  12 Best Tab & Accordion WordPress Widgets & Plugins
  Nona Blackman

Use Mega Menus Wisely and They Will Enhance Your Site

Mega menus can be a great way to improve the UX of your site. If you have a large site with lots of links, then adding one will help your users navigate. If your site fits the bill, try adding a mega menu today.