Main navigation

We’ve built the Main navigation to be as flexible as possible while providing an intuitive and functional experience for desktop and mobile users. Learn more about building a great Main navigation below!

Section settings

The Main navigation has a few core settings which will determine the baseline layout and experience.

Align items

  • Space between
  • Space around
  • Space evenly
  • Start
  • End
  • Center

Display menu UX

This setting controls which user action will open the sub-menu item (the "UX"). There's no right answer for this, so you can use whichever setting feels best to you. Lots of sites do this both ways.

On click

Using the "on click" setting will open the menu item when a user clicks the top-level link. (Similar to

On hover

Selecting the "on hover" setting will open the menu item when a user hovers over the top-level link. (Similar to

Available blocks

The Main navigation section is comprised of several basic blocks. You can use some or all of these blocks and order them in whatever way suits your site.

We recommend including the logo, navigation menu, predictive search, and shop icons blocks.

Displays the storefront’s primary logo. Add or edit this logo in the Branding section of your Theme settings. Learn more about the Logo block Learn more

The navigation menu block automatically groups and displays all menu item blocks which are added to the main navigation. Learn more →

Menu items are flexible and powerful blocks used to displays a menu/sub-menu within your main navigation section. These are the building blocks of your navigation menus block — you must include a navigation menu block to display your menu items. Learn more →

We’ve re-imagined what you should expect from a “default” Shopify search. Our powerful real-time search powered by Shopify’s Predictive Search API will maximize your conversion. Set up default menus and promos to guide users where you’d like them to go. Learn more →

Shop icons

Displays an icon-based interface for the user’s account and cart. Learn more →

Align theme