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 on Click to reveal/hide the dropdown menu.3 examples of successful mega-menu 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
Several elements stand out on Target.com 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 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.
