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:

 

*** This is a guest blog post by Matt Tanguay where he shares his numbers-backed findings in the form of Ecommerce conversion tips ***

Access to all our speakers slide decks!

Access to all our speakers slide decks!

By subscribing to our email list you'll have access to the slide decks of our speakers since the beginning.

You have Successfully Subscribed!