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 amazon.com)
On hover
Selecting the "on hover" setting will open the menu item when a user hovers over the top-level link. (Similar to nike.com)
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.
Logo
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 →
Navigation menus
The navigation menu block automatically groups and displays all menu item blocks which are added to the main navigation. Learn more →
Menu item
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 →
Predictive search
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 →
