How to use?
Grid Menu is a popular menu type used on many apps and e-commerce websites. It typically displays catalogs or key features and is often shown on the homepage.
Mobile Grid menu take up screen space since they float on the screen. As a section menu, they scroll along with the page.
Key Benefits:
- Works seamlessly on both mobile and desktop for a consistent experience
- Saves space and scrolls with the page.
- Offers multiple presentation styles with images, grids, and multi-level layouts for a rich, professional 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 mobile grid menu:
Events
Invoice
Wishlist
Voucher
Products
...
This is a 1 level menu tree. Grid Menus do not support multiple menu levels to maintain simplicity..
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.
