Building the Best Mega Menu

First of all, nothing can be better than a flat, one level menu. However, the problem is that a simple menu is applicable for small sites only. When we need to build navigation paths for something that has more than ten pages, we are forced to create multi-level menus.

Let us accept that a mega menu is something that has a deep structure with multiple node levels. It is well known as the type of menu found on any large or middle-sized website where content managers need to represent a lot of information impossible to squeeze into a primitive, one or two-level menu. Frequently, mega menus include different media content to better visually represent the navigation categories of the website.

One of the best examples of a mega menu is Amazon’s menu for online store products:

Or Aliexpress:

Other big, popular websites like this type of menu as well. Bitdefender:

Microsoft:

Samsung:

The last three types of menu are built using a simple scheme: Fixed top categories; dropdown; and many sub-categories. These menus appear to be friendly and nice-looking, but it is very difficult, sometimes, to find the information needed.

We can quickly grab the required top-level category, but we need to spend some time searching further because, typically, we need to constantly go down the path of ‘category — sub-categories’ for each section; thus red→green, red→green, and so on:

Moreover, it is not possible to include all required categories if you use simple two-step menus. Just try to find the ‘SQL Server’ section in Microsoft’s menu, for example.

So, it might possibly be simpler for users if a menu had a deeper nesting. For example, the Samsung menu:

This time we would grab information consistently, category→sub-category→sub-category. Other popular websites follow this strategy. For example, IBM:

Oracle:

From my point of view, to build great mega menu, we should hold to these main principles:

1. I would prefer to use a single button to open a menu. We wouldn’t have any trouble with layout when we need to add one more item to the top level. For example, it would be a hard task for Oracle to place all those first level items in one line.
2. 2. To enhance user experience, we can open this menu with an OnMouseDown event. A typical click event would not be bad either, but please don’t fire a menu button using an OnHover event. Opening menus with OnMouseDown event is default behavior for almost every desktop software you can possibly use (try to open the menu of your browser), so clicking to open a menu is a typical interaction choice for many of us. When you open your menu using a hovering event, many of your users will suffer. Let us test:

Oracle:

I click the menu button, but an OnHover event has already opened it, so my clicking merely closes the menu.

Amazon:

I click the menu button and it immediately opens a new page with all item categories. However, I just wanted to open a menu.

3. Don’t close the menu when the mouse leaves the menu area. Sometimes it is happens by mistake. Do not make the user open menu one more time. This is mainly the case if you open the menu for a hovering event.

4. Open submenus with hover event. If the user clicks to expand a menu, it will not break anything. Hovering will perform the same action, but faster. Moreover, this is default behavior for system submenus.

5. Solve breaking the dropdown problem in a proper way, as Amazon does. Microsoft doesn’t provide any solution for their submenus, while Oracle and IBM use delays. If you want to keep JavaScript size as small as possible, use delays. They are not so bad, and it is default system behavior for submenus. But if you can, it would be better to use ‘Menu-aim’ jQuery plugin.

6. If your menu contains lots of items, provide filter capabilities so everybody can quickly narrow down all the options to the required set. Something like Directory Opus or Jetbrains products:

Don’t underestimate the menus on your site — they are, frequently, the main entry point of your site. Provide a clear navigation structure and your users will find information faster. Thus, they will be more satisfied using your site. If you want to start with something pre-made, I would recommend you look at CodyHouse and Navegante solutions.