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: