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:

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

 

On mobile…

Show a collapsed Shop menu item for the product categories.

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

Also consider having a Link Bar.

 

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 *