How to use?

Mega Menu is one of the most popular and effective menu types, especially on desktop. Users naturally expect to find a Mega Menu right below the website header. However, Shopify’s default menu is usually simple, lacks strong structure, and offers little to no image support. That’s why you should use the Navi+ Mega Menu.

Key Benefits:

• Fully replaces Shopify’s simple default mega menu

• Offers multiple presentation styles with images, grids, and multi-level layouts for a rich, professional experience

• Works seamlessly on both mobile and desktop for a consistent experience

FAQ:

1. I haven’t decided whether to use the free or paid version. Can I try the professional menu templates?

Absolutely! The menu groups are mainly to help beginners avoid feeling overwhelmed by advanced features in Navi+ 😄. The best way is to try out the professional menus to explore all features and layout options. Later, you can simply delete any menu you don’t need or find unsuitable.

2. Does creating a menu here make it show up on my website right away?

Not yet. You’ll need to publish the correct menu for it to appear on your website. Don’t worry — it’s easy!

3. What if I choose the wrong template or make a mistake?

No problem at all. You can delete it and create a new one anytime. If you're testing a menu and want to try another template, you can save the current one as a backup file and re-open it later. You can even copy and paste parts between menus (by opening two browser tabs) to keep your previous work. Feel free to experiment!

4. Should I create just one menu or multiple?

You should create multiple menus. Only the active menu will show on your site, but you can prepare many versions — by selecting different templates or cloning menus. Menus can be configured to show/hide based on page type (home, product, collection...), device (mobile or desktop), or URL keywords. So go ahead and build menus that fit each situation!

Step 1: Edit the menu tree

1.1. Understanding the Menu Tree

The menu tree is the most important part of any menu—it defines the structure.

Here’s an example of a menu tree of full desktop mega menu:

[+] Menu  
[+] Categories
[+] Alphabets 
Skateboarding  
   - Components (Group name)  
   - Desks
   - Trucks
   - More (Blue link to detail..)   
   - Completes      
        - Hats (Group name)
        - Burton Lunchlap Earflap Hat           
        - Volcom Ramp Stone Adjustable Hat
        - ...
[+] Accessories  
[+] Blogs  
[+] Support
[+] More

This is a 3-level menu tree. Level 1 includes Menu, Categories, Alphabets, Skateboarding... and More... Skateboarding has 5 level-2 submenus: Components, Desks, Completes (Consists some level-3 menu submenus: Hats, Burton Lunchlap Earflap Hat...)

You’ll spend most of your time building this menu tree for your website, helping customers find the content they’re looking for.

1.2. Basic Interactions with the Menu Tree

You can drag and drop menu items up and down or left and right to change their position and parent-child relationships in the menu tree.

When you hover over any menu item, you’ll see additional options: edit the item’s details, delete it from the menu tree, or copy and paste it elsewhere.

Tip: You can copy a menu item from one menu to another by opening the Navi+ app in two browser tabs.

1.3. IMPORTANT! Delete the sample menu items and keep only the structure you want.

This is a common situation when creating a menu with Navi+. When you create a new menu, we include a full example with popular menu items to show layout ideas and let you copy/paste as needed. However, if you're new to Navi+ and using the Starter plan, you’ll see many red (i) warnings for features that are not available, such as uploading images or using advanced interactions.

If you like these advanced features, consider upgrading to a Business or Elite plan. But if you want to continue with the Starter plan, please find and delete the menu items with red (i) warnings.

Important Tip: When the delete confirmation appears, turn on “Don’t ask again next time” to delete faster.

1.4. Add menu items to the Menu Tree

To add a menu item, you have two options:

Option 1 (Not recommended if you're new to Navi+): Click “Add menu” to insert a blank menu item at the end of the menu tree. This method requires a good understanding of menu item settings, which we’ll cover below. It might feel overwhelming at first, so you can explore this later.

Option 2 (Recommended): We've already prepared many well-designed menu item templates for you. Simply copy and paste them into the right place. After finishing your menu tree, just delete the unused templates.

1.5. IMPORTANT! The “Is Multi-Column menu item” attribute (only available for Desktop and for Mega menus).

This is a highly specialized feature designed specifically for desktop Mega Menus. It is used when you need a full-screen menu item with multiple columns. Each column can be configured with custom widths (e.g., 3/12, 4/12, 6/12...). The Multi-Column menu item is extremely powerful and flexible for building complex menu layouts tailored to your needs.

If you don’t need complex layouts like Multi-Column menu items — or plan to use them later — you can safely delete them from your level-1 menu items.

See detailed instructions on how to use the “Is Multi-Column menu item” attribute.

When a level-1 menu item is set to “Is Multi-Column menu item”, it will be highlighted in light yellow on the Menu Tree, and its level-2 menu items will automatically be converted into Columns (with a red icon), regardless of any other attributes you assign.

For these Column level-2 menu items, the only usable attribute is Width layout. All sub-menu items under that column will then be arranged within a single column.

Do you find this type of menu difficult to use? You’re right! But the results you get with this attribute are truly WOW.

If you remove the “Is Multi-Column menu” attribute from the level-1 menu item, everything will revert to the original state.

Why do you need the “Dropdown width when expanded” attribute?

By default, when using the “Is Multi-Column menu item” attribute, the submenu (dropdown) expands to full screen width (or based on the container size, usually 1280, 1366, 1440, or 100% — configurable in the Advanced tab). However, with such a wide area, you may not always have enough content or ideas to fill the space.

In this case, you can limit the submenu width (individually for each Multi-Column menu item) to avoid an empty or unbalanced look.

Example: You can create a menu with a width of 700px and two columns at 6/12 each. This way, you still get a spacious layout without wasting too much screen real estate.