Step 1: Edit the menu tree

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.

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.

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.