Mega Menus

Baymard Institute recommends to place the main product categories directly in the main menu. This means that the level 1 navigation in the header menu (on desktop) or the burger menu (on mobile) is your main categories. That way, visitors can get a quick glance at what your site offers without having to click, hover, or scroll.

Here’s the best combination I figured out so far:

 

On desktop…

If you have about seven or fewer main product categories:

  • Show those categories directly in the header menu. Some websites managed to fit up to about 10 categories. However, I find that it looks overwhelming.
  • Each menu item one triggers a Mega Menu panel. Show the sub categories as columns – ideally 3 to 5). (See example)
  • Optionally show an image for each column, or for a few featured items. (See example)

If you have more than seven main product categories or a lot of sub-categories:

  • Have a single Shop button (or a similar label) which triggers a two-dimensional Mega Menu.
  • Alternatively, if you can figure out a simplified version of your categories, you can still show a handful of items at the top, and have a two-dimensional Mega Menu under each. (See example)

 

On mobile…

Show a collapsed Shop menu item for the product categories.

  • (See example)
  • When tapping it, it expands your main categories under it.
  • The Shop item doesn’t link to anything (I don’t recommend having a general Shop page). To keep things simple, they need to choose a category.
  • This will make it easy to also list your other important pages (About, Order Tracking, etc.) below the Shop item.

If you only have fewer than about 7-10 main product categories:

  • Show them as level 1 navigation in the burger menu. (See example)

Also consider having a Link Bar.

  • Put it right below your header to feature some of your main product categories.
  • Growth Rock saw a 5% increase with 93% statistical significance by adding a Link Bar. (See a mockup of the concept) (See example)

 

Hope this helps! Thoughts? What kind of menu layout do you have on your site, and why?

 


Sources:

Leave a Reply

Your email address will not be published. Required fields are marked *