Mega-menu: Another solution to cluttered navigation

The term mega-menu was first used by usability expert Jakob Nielsen, who summed it up in this article, as a "big, 2-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users' choices." (Source: Nielsen Norman Group)

For several years now, e-commerce websites, among others, have see the benefits of mega-menu navigation. This type of dropdown menu gives the user the ability to choose from any link in one, single glance. Below I take a look at why mega menus are important and explore a few websites using this type of navigation successfully.

Why are mega-menus important for navigation?

As mentioned above, a mega-menu gives users a seamless view of all the navigation options. Users are able to find their destination in one action, rather than hovering over each section to find the intended item. Furthermore, reducing the number of levels of hierarchy in your navigation will create a better user experience for your visitors.

The mega-menu also solves several challenges we see with the traditional hover-menu. With the use of a single unified navigation, we reduce the risk of accidental menu triggers. Often times when a user is forced to follow a path to get to the next link, they will trigger an unwanted menu item, thus loosing their current item.

With all the buzz about responsive websites, how does this translate to mobile?

The simplest solution to this is to display only the general sections of your navigation to be visible on mobile devices. In addition, be very careful of using hover or dropdown states on mobile devices. A better option is to use an onClick to reveal/hide the dropdown menu.

3 examples of successful mega-menu navigation

The navigation

The White House website has a few noteworthy features:
  • Content area on the right offers a good example of featuring a call-to-action
  • Content hierarchy is clear by using bolded categories and visible subcategories navigation

Several elements stand out on website:
  • We see the use of a side content area to display related categories and featured deals
  • Strong visual design gives user clear and single view of all the categories under "Home”

University of Nebraska-Lincoln navigation

University of Nebraska-Lincoln site offers user good functionality and a single view of all links. The entire menu is triggered upon hover, giving the user all available options to choose from.

In summary.

A mega-menu can solve many challenges for both large and small business websites. The key to a successful menu is clear content hierarchy, strong visual design, and creating a unified user experience when navigating through the menu.

There are always ways to improve your website navigation. Let TBH Creative help your company define a great user experience for your website's visitors with our complete web design services.
TBH Creative

About TBH Creative

TBH Creative is an Indianapolis-based web design and marketing company. Our services include web strategy & planning, website design and development, inbound marketing, SEO, branding, graphic design, and marketing reporting.

Since 2004, TBH Creative has worked with hundreds of companies in a wide range of industries, including healthcare, finance, and service. We specialize in developing complex, enterprise-level websites that convert.

We believe in clear communication, high standards of excellence, and beating deadlines. But beyond those ideals, what really drives the heart of our business is your business. We take pride in helping our clients achieve more with digital marketing and web design than they ever thought possible.

Find out more

Receive articles in your inbox