Mega Menus

Mega menus use large popup windows to display a range of choices not usually available through other means. They have the advantage of allowing users to select their destination without navigating through separate layers of a menu hierarchy. However, they can lead to a number of usability and accessibility issues.

When to Use Mega Menus

For desktop platforms, mega menus offer an attractive alternative to layered navigation. If they are designed to meet users’ expectations, users can do a quick visual scan and single click away from most pages in a site. But to achieve this the many menu items shown in a single popup (there are 50 in the John Lewis example!) have to be well organized. On mobile platforms, mega menus are somewhat limited, although certainly not impossible, because of the typically-vertical orientation. The John Lewis website does not attempt mega menus on a mobile, for example – not even in landscape mode.

Mega menus work best in problem areas that are well understood, such as e-commerce for household items. For online grocery websites, they can quickly become nightmarish because of the sheer number of categories – see the Ocado example. In domains with more abstract or overlapping categories, users may need the reassurance provided by “incremental” navigation. This involves the more traditional loading of a new page for the menu category selected where users will see examples, illustrations and descriptive text that provides navigational feedback.

Alternatives

Mega menus can be daunting for some users. If the grouping is not clear or not as expected, users can struggle to find the item they’re after. Consider providing additional or alternative approaches to navigation, particularly if you need to consider mobile platforms. The two most likely are…

• Search: The world’s most successful online retailer, Amazon, does not make use of mega menus. Their sites rely primarily on search and cascading menus. However, be sure that your search is effective for users. Too many results are just as bad as too few.

• Cascading menus: These are the traditional pop-out (horizontal) or pull-down (vertical) menus found in many, if not most, desktop interfaces. They are less-frequently used on mobile platforms because of screen limitations. Their advantage is that users are only shown further choices relevant to their earlier selections, thereby making more efficient use of the screen space.

Learn More About Mega Menus

Practical article on the benefits and application of mega menus.

Detailed discussion of the downsides of mega menus.

Tips on the use of mega menus in ecommerce.