Should Product Categories Be Listed Directly in Your Menu?

By December 16, 2018
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:

Matt

Author Matt

More posts by Matt

Leave a Reply