And, even if you stick to text alone, you have richer typography at your disposal (letting you differentiate link sizes according to their importance, for example).

Mega menus make it easy to use pictures and icons when appropriate. While plain text can be wonderful, illustrations can indeed be worth a mouthful of words, as the Moleskine example shows.This again helps users understand their choices. Mega menus let you visually emphasize relationships among items. Regular dropdowns don't support grouping unless you use kludges, such as prefixing secondary choices with a space character to indent them.

Mega menus show everything at a glance, so users can see rather than try to remember. People have enough on their minds, and messing with short-term memory reduces their ability to accomplish tasks on your site. As a result, you can't visually compare all your choices you have to rely on short-term memory. Yes, you can scroll, but (a) it's a pain, and (b) scrolling hides the options at the top of the menu.

For bigger sites with many features, regular dropdown menus typically hide most of the user's options.

Here are some arguments to support this empirical fact: We know from user testing that mega menus work. Mega menus also allow designers to show multiple levels of the site’s information architecture - in three out of the five examples above (Dave Ramsey, Game Stop, John Lewis), the mega menus contain both first-level categories and second-level categories. Images in the mega menu can help users select the right option. used images in the mega menu to help users visualize and compare products.Īs the NovaScotia and Moleskine examples show, mega menus provide sufficient space for images and other rich content. Retailer used mega menus with labels that were difficult to scan and distinguish from one another. The mega menu was hard to scan because the option labels were not frontloaded and were too similar to one another (e.g., the labels under XBOX 360 Pre-Owned are hard to differentiate because they all start with the word Pre-Owned ). Applying a different font face or color could have made these groups distinct. The Nova Scotia mega menu included images promoting local attractions and activities The visual styling did not differentiate well between the two distinct groups of categories, Browse listings and Learn more about. Users opening the mega menu could quickly scan the different categories. The mega menu separated the content into five distinct groups.

Menu options revealed on hover, click, or tap.

Vertical or horizontal form factors when activated from top navigation bars when activated from left-hand navigation, they might appear as mega fly-outs (not shown).

Everything visible at once - no scrolling.

Navigation choices structured through layout, typography, and (sometimes) icons.

Big, two-dimensional panels divided into groups of navigation options.

They are an excellent design choice for accommodating a large number of options or for revealing lower-level site pages at a glance.Īs the following screenshots show, mega menus have the following characteristics: Mega menus (sometimes spelled “megamenus”) are a type of expandable menu in which many choices are displayed in a two-dimensional dropdown layout.

Megasync website homepage