What is a mega menu?
Mega menus are a type of expandable menu. Like a typical navigation menu, it contains a list of links that are accessed by tapping, clicking or hovering. While a traditional simple navigation menu is one column, a mega menu is styled in two or more columns and can include icons, images and graphics.
As an illustration, here’s what the mega menu on Staples’ website looks like.
Mega menus have their application, but they also have issues. We’ve outlined the pros and cons below.
Mega menu pros
Mega menus allow more space to show more links and subcategories. This may give users a better sense of a website’s range of offerings. Mega menus also have the potential to allow users to reach every page of the website through this one menu. For returning customers who are already familiar with a website, mega menus may help them get to a specific page more quickly.
More design options are available for a mega menu than for a regular dropdown menu. In addition to text, images, icons and tooltips can be included.
Traditional drop down menus can be very long, forcing users to scroll down to see all the options. With a mega menu, users can see all the available options with one click. Since everything is visible at once, you’ve eliminated the need for scrolling.
Mega menu cons
Mega menus should be used cautiously and only when they are absolutely necessary. While they do offer more space and options, more is not always better.
Some users will find mega menus overwhelming and may opt to leave the site rather than be faced with too much choice.
Screen size problems
When in action, mega menus hide the information that’s under them. That’s a problem when the user accidentally hovers over the menu while trying to read the content, which suddenly gets hidden. If the user has a small screen, it only makes this problem worse.
“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.”
Potential to slow page loading speed
Page speed is an important ranking factor, and mega menus have the potential to slow load times and rendering. This effect may not be as much as a large image or video, but it is a factor to consider.
Low-vision users who use screen magnifiers are only able to see small portions of the menu at any time. This makes mega menus a particular issue for many users.
Amazon introduced mega menus in 2006. Some of the companies saw a 15%-20% drop in revenues immediately upon deploying their new mega-menu-based navigation. Amazon doesn’t use mega menus anymore.
Typically doesn’t work well on mobile
The mega menu will not be mega on mobile. Therefore we recommend reverting to the typical hamburger menu on mobile, which means maintaining multiple versions of the navigation.
When does it make sense to use a mega menu?
There are certain applications where mega menus make sense. However, in general, we do not recommend using mega menus for most websites. Don’t add one just because they look cool. Consider the goals of your website and determine if a mega menu will improve the user experience or impair it.