E-commerce Link: Go Big or Go Home

By keeping it simple, Clinique has room for callouts to related products and tools at the bottom of its mega menu.

Ripcurl’s text-based labels take a back seat to the imagery in the site’s mega menu.

5 mega menu implementation best practices for your website

In May, we began exploring the tip of the navigation best practices iceberg. Now I want to move on to a worthy trend in navigation design that’s become popular during the past year or so: mega menus.

Mega menus work in conjunction with the global navigation bar to help users move through your website confidently and efficiently. They are among my favorite navigation interactions; particularly for sites with a robust information architecture (IA).

In the Beginning …
Before mega menus, there were a couple of standard designs for a global navigation bar. The first was a simple static global nav. Clicking one of the buttons on the bar would open another page where additional menu items were available, either in the main content area or listed down the left-hand side. Technically, this method gets the job done. But because there is so little insight into the breadth, depth and organization of site content, it requires a lot of guessing, clicking and tunneling. This is not the most efficient way to connect users with the content they seek.

The second familiar global navigation interaction makes use of cascading dynamic dropdown menus, sometimes called flyouts. When users hover over a global navigation button, they get a dropdown menu listing their choices one level deeper. When they hover over one of the items in that menu, they get another menu with yet more options one level deeper still. While this gives the user more insight into the structure of the site, this multi-level hovering is a usability frustration to say the least.

We’ve all experienced the annoyance of trying to point from one dropdown menu to the next: On the way to making your next selection, the first menu disappears. BAH! So, how is the mega menu different?

Make It Mega
Mega menus are large navigation panels that appear when hovering over a global nav button. They are different from flyout menus in that they display multiple levels of IA at once with no scrolling. For example, outdoor gear retailer REI groups its content into logical categories and displays those categories and all related sub-options at once through the mega menu. The large mega menu panel allows you to move your mouse from one option to the next with no fear of it doing that pesky disappearing act.

Related Content