Navigation Configuration

Menu Types Supported

• Basic Menu: Single-level, no sub-menu items.
• Dropdown Menu: One level of nested sub-menu items.
• Image Menu: Sub-menu items linked to Shopify resources (Product, Collection, Blog) with images.
• Mega Menu: Two or more levels of nested sub-menu items, supporting both resource and standard links.

Configuring Navigation

1. Open Shopify admin and go to Content > Menus.
2. Select the Main menu (handle: main-menu).
3. Add menu items:
   • Enter a name for each item (this is the label shown in your storefront).
   • Set the link (URL, or choose a Shopify resource like a product, collection, or blog).
   • Click Add to save the item.
4. Rearrange menu items:
   • Drag to reorder items as needed.
   • To nest an item (create a dropdown or mega menu), drag it slightly to the right under a parent item.

let { data } = await storefront.graphql(LAYOUT_QUERY, {
  variables: {
    headerMenuHandle: "main-menu",
    footerMenuHandle: "footer",
  },
  cache: Cache.long(),
});

Visual Examples

Basic Menu

Dropdown Menu

Image Menu

Mega Menu

Best Practices

• Organize logically: Group related links together and use clear, descriptive names for menu items.
• Keep it simple: Limit the number of top-level menu items to avoid overwhelming users.
• Use consistent naming: Match menu item names with your storefront’s categories and pages for clarity.
• Limit nesting: Avoid deeply nested menus; 2–3 levels are usually sufficient for most stores.
• Use resource links: When possible, link directly to Shopify resources (products, collections, blogs) for better integration and automatic updates.
• Test on all devices: Preview your navigation on desktop and mobile to ensure menus are accessible and easy to use.
• Review regularly: Update your menus as your catalog or site structure changes to keep navigation relevant.

Summary