How to use?

A FAB (Floating Action Button) is a simple menu that always floats at the bottom of the screen, typically used for support. FABs often provide chat tools such as WhatsApp, messaging, email, as well as links to support resources and social media channels to promote your website.

Key Benefits:

  • Simple, usually used for support.
  • Can be used to group floating buttons from other apps or to trigger a Slide Menu.
  • Places important links within easy reach for quick, convenient access
  • Centralizes key navigation, helping users and search engines better understand your site – great for SEO

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:

Support  
- Banner  
- Chat with us (Displaied as Group)  
- Whats App
- Telegram
- Facebook Messager
- ...

This is a 2-level menu tree. You can create up to 3 levels on a FAB depending on your creativity; however, for simplicity, 2 levels are usually the optimal choice.

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

Catalog: A level 1 menu item, displayed as a tab on the tab bar. All-Mountain: Level 2 menu item that appears when you tap on Catalog.

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.

Step 2: (Shopify) Publish the menu on your website.

2.1. Turn on Navi+ on App Embeds

Step 1: Click Online Store, then click Themes. Tips: Right-click on Online Store and select “Open Link in New Tab” to save time.

Step 2: Select the theme where you want to publish the menu.

Click: Customize

  • If your website is new and has no users yet, feel free to publish the menu without worry—you can easily turn it on or off at any time without affecting visitors.
  • If your website already has regular traffic, be more careful. The best practice is to create a duplicate Theme and test Navi+ on that version first.

Step 3: Go to App embeds, find “Navi+ on All pages”, and turn it on.

Step 4: Don’t forget to click “Save” to apply the changes.

After these 4 steps, Navi+ has been installed on your website and is ready to display. However, the process is not yet complete. Go back to the Navi+ app tab to actually turn on Publish Menu.

2.2. Select display settings and publish the menu.

Step 1: Click the Publish to website button.

Step 2: Choose display settings then PUBLISH THE MENU.