Main navigation

Featured links

1. Company XYZ documentation on the hamburger menu block
2. Company XYZ documentation on the logo block
3. Company XYZ documentation on the main menu block
4. Company XYZ documentation on the mega menu block
5. Company XYZ documentation on the search block
6. Company XYZ documentation on the account icon block
7. Company XYZ documentation on the cart block
8. Company XYZ documentation on the button block
9. Company XYZ documentation on the localization selectors block
10. Company XYZ documentation on the icon with text block
11. Company XYZ documentation on the rich text block
12. Company XYZ documentation on the social media icons block
13. Company XYZ documentation on section backgrounds settings
14. Company XYZ documentation on section padding settings
15. Company XYZ documentation on separators settings
16. Company XYZ documentation on visibility settings
17. Company XYZ documentation on layout widths settings
18. Shopify documentation on sections and blocks
19. Shopify documentation on customizing sections
20. Shopify documentation on the theme editor

Helpful videos

Learn With Shopify video: Shopify Navigation Menu Best Practices

Learn With Shopify video: Shopify Navigation Menu Best Practices

Learn With Shopify video: Shopify navigation menu explained in 50 seconds

Learn With Shopify video: Shopify navigation menu explained in 50 seconds

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Build your primary navigation by combining menu, branding, search, and utility blocks in the order you want them to appear. Block order shapes the overall layout, while individual blocks can still be positioned differently on desktop and mobile for more precise control. For a broader overview of how theme sections and blocks work, see Shopify documentation on sections and blocks

Core settings

These settings affect how visitors interact with navigation across the whole section.

Menu interaction

Choose whether sub-menus open on click or hover. Click is usually the safer option when you want more deliberate interaction, while hover can feel faster on pointer-based devices.

If your navigation includes deeper menu structures or promotional dropdown content, click-based opening is usually easier to control and less prone to accidental menu changes.

Mobile menu default state

You can show the first mobile menu item open by default. This works well when your first top-level item leads to a high-priority category or collection, but it can feel cluttered if that first item contains too many links.

Color settings

These settings override broader theme color choices for navigation text and icons within this section. They are most useful when the navigation sits on a custom background or needs stronger contrast than your default styling provides.

Tip

After changing navigation colors, check both desktop and mobile states to make sure links, icons, and dropdown triggers remain easy to read.

Supported block types

1. Account icon
2. Button
3. Cart
4. Hamburger menu
5. Icon with text
6. Localization selectors
7. Logo
8. Main menu
9. Mega menu
10. Search
11. Rich text
12. Social media icons

Block layout and shared block behavior

Most blocks in this section use the same placement logic. Their layout setting decides whether they sit in the left, center, or right group of the main row, and block order controls the order within each group. Some blocks can also move to a separate full-width row.

Alignment settings are usually secondary. They matter most when a block fills available space or sits in a full-width row.

Desktop and mobile layout

Many blocks let you choose different positions for desktop and mobile. This is useful when you want a fuller desktop header but a more focused mobile layout that prioritizes the menu toggle, logo, search, and cart.

Fill available space

Some blocks can stretch to fill remaining space in the desktop row. This works best for blocks like the logo, menus, or search when you want them to anchor the layout and push other actions outward.

Block visibility

Many blocks include their own visibility controls. Use these when you want a utility to appear differently by device without duplicating the entire section.

Key block types

Hamburger menu

The Hamburger menu block is the mobile trigger for the navigation. It is required for the main navigation to work on mobile, so it should be treated as essential rather than optional.

Keep it in a clear, predictable position on mobile, usually at the left side or alongside the logo. Avoid hiding it on mobile unless you have another clear way for visitors to open navigation.

Removing or hiding the Hamburger menu block on mobile can leave visitors without a usable way to open the main navigation.

Logo

The Logo block displays your brand mark and falls back to your store name if no logo image is set. Separate desktop and mobile width controls help you keep branding visible without crowding smaller screens.

A compact mobile logo usually produces the cleanest result. If you let the logo stretch too wide, it can push more important actions out of view.

Main menu and mega menu

Use the Main menu block for standard dropdown navigation and the Mega menu block when you need a larger, more editorial flyout. On mobile, all Main menu and Mega menu blocks are combined into a single navigation interface.

Both block types can include a banner and a features bar, which makes them useful for merchandising as well as browsing. Mega menu also adds stronger control for structured navigation, including optional parent-level “view all” links inside sub-menus.

Banner and promotional content

Menu and mega menu blocks can include their own background media, foreground content, button, and supporting image. Use this for seasonal campaigns, featured collections, or key customer paths that deserve extra emphasis.

Caution

Promotional content can improve discovery, but too much of it inside navigation can make browsing feel slower and less clear.

Mobile behavior

Because multiple menu-based blocks merge into one mobile interface, treat desktop and mobile as related but different experiences. Keep category labels clear and review the combined mobile result if you split desktop navigation across several menu blocks.

Search

The Search block adds full-store search to the navigation. You can show it as an icon-only trigger or a small field, with separate mobile behavior to preserve space.

If predictive results are enabled, you can also define default and secondary result menus plus optional promotional content. This makes search more useful for discovery, not just direct queries.

Note

Predictive results only apply when predictive search is active, and the block notes that additional setup is required for real-time results.

Utility and action blocks

These blocks add common supporting actions around your core navigation.

1. Account icon for sign-in and account access
2. Cart for cart access, with optional color overrides
3. Button for a highlighted action such as a promotion or special entry point
4. Localization selectors for country, currency, and language switching

For compact headers, smaller or icon-only controls usually work best. When these blocks compete for space with menus and logos, use mobile-specific layouts or block visibility to simplify the smaller-screen experience.

Informational and social blocks

These blocks are helpful when the navigation also acts like a utility or messaging bar.

1. Icon with text for short selling points or trust signals
2. Rich text for brief formatted content
3. Social media icons for social links from your configured accounts

Use these sparingly in primary navigation. They work best in a secondary row or full-width layout, where they support the header without competing with core browsing paths.

Standard section settings

Section background settings

Use the Section background settings to add a color, gradient, image, or video behind the navigation. These settings can create a stronger branded header, but they can also change the perceived spacing and visual weight of the top of the page.

Overlay controls help keep text readable over media backgrounds. If you use different mobile background media, check both breakpoints carefully because navigation is a high-use area. If you are adjusting these settings in the editor, Shopify documentation on customizing sections explains how section settings are edited in the theme editor.

Padding settings

Use the Padding settings to control the space above and below the navigation content. Small changes here can make the header feel more compact or more spacious.

Because this section appears across the site, modest padding is usually easier to maintain consistently. The default padding is light, which is a practical starting point unless your logo or block mix needs more room.

Separator settings

Use the Separator settings to add a top or bottom line to the navigation. This is useful when you want a cleaner boundary between the header and surrounding content without using a full background treatment.

If the separator color is left transparent, the section uses the broader border color setting. Set a custom separator color only when the default border color does not give enough contrast.

Visibility settings

Use the Visibility settings to show or hide the entire section by device type. This is most useful when you want separate desktop and mobile header patterns.

Use block-level visibility when only a few elements need to change. Use section-level visibility when the entire navigation structure should be replaced on a given device range.

Width settings

Use the Width settings to control both the content width and the overall section wrapper width. This matters most when your navigation includes backgrounds, wide menu layouts, or full-width rows.

Content width is the main control for how far navigation items can spread, while section width matters most when the section has its own background treatment. The editor can underrepresent width changes, so check the live storefront before finalizing. For a quick overview of the available editor controls, see Shopify documentation on the theme editor

Usage notes

1. Prioritize mobile access. Keep the Hamburger menu block visible and easy to reach so visitors can always open navigation on smaller screens.
2. Design by layout groups. Use left, center, and right block placement first, then refine with block order and fill-space settings instead of relying on alignment alone.
3. Keep menus scannable. If you use multiple menu-based blocks, review the combined mobile menu to make sure categories still feel clear and not over-segmented.
4. Use promotional content selectively. Add banners, buttons, and feature messaging only when they support navigation rather than distract from it.
5. Check the live result. Review contrast, spacing, and width on the storefront after adding backgrounds, custom colors, or width changes.
6. Review both states of search. Compare the empty search state and the typed-query experience so predictive results, default content, and promotional items all support the same customer journey.
7. Test separate device layouts. Review desktop and mobile after changing block positions, visibility, or alignment, since the two views can behave differently.
8. Watch for media overrides. When you add background images, videos, or separate desktop and mobile media, confirm that cropping, fallback appearance, and readability still work well.