Main menu

Easily create a flexible main navigation area with customizable layouts, banner images or videos, action buttons, feature bars, and responsive design options for a standout, accessible customer experience.

Last updated About 2 months ago

Overview

The Main menu block is designed to deliver a flexible and visually engaging navigation area. It supports features such as banners, media, advanced layout options, and responsive controls. By combining core menu capabilities with rich background and foreground content, you can improve branding and navigation usability throughout your storefront.

💡 Tip: Use the visual and feature options in the Main menu block to highlight collections, announcements, or promotions directly within your main navigation.

Available in sections

  1. Main navigation

Block limit

You can add up to 2 Main menu blocks within a single section. This gives you versatile layout and styling opportunities in your storefront’s navigation.

Main menu selection

The Main menu block lets you choose which navigation menu is displayed. Extra options for banners and feature bars allow you to promote key links and content right from your navigation.

  1. Menu
    Select the navigation menu displayed in the block.
    Default: main-menu

  2. Show banner navigation item
    Add a prominent or promotional banner navigation link.

  3. Show features bar
    Display a horizontal bar for linking to features or announcements.
    Default: enabled

Layout settings

Layout options let you control how the navigation aligns and fills available space, so your Main menu block always feels balanced with your site design.

  1. Fill available space
    Allow menu items to expand horizontally and occupy gaps for a seamless look.

  2. Desktop navigation alignment
    Align the navigation for desktop visitors: 1. Left (default) 2. Center 3. Right 4. Full width

Usage notes

💡 Tip: Prioritize high-contrast text and overlay colors for better readability with banners and background images.

  1. Always preview your Main menu block on both desktop and mobile to ensure everything aligns and remains clear across devices.

  2. Assign unique editor titles for each block to simplify management if you use multiple navigation blocks.

⚠️ Important: Review the alignment, content contrast, and foreground/background combinations in every device view to deliver a polished, accessible brand experience.