# 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:**

<details>

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

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.

</details>

<details>

<summary><strong>2. Does creating a menu here make it show up on my website right away?</strong></summary>

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

</details>

<details>

<summary><strong>3. What if I choose the wrong template or make a mistake?</strong></summary>

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!

</details>

<details>

<summary><strong>4. Should I create just one menu or multiple?</strong></summary>

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!

</details>

### 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.

<figure><img src="/files/71DBHmbjcvZ4krcizvZk" alt="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."><figcaption></figcaption></figure>

#### 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.

<figure><img src="/files/oNJgW0h7DHJQunPyk97n" alt=""><figcaption></figcaption></figure>

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.

{% hint style="info" %}
**Tip:** You can copy a menu item from one menu to another by opening the Navi+ app in two browser tabs.
{% endhint %}

#### 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.

<figure><img src="/files/W6LLtyL8kAQGYyv7AWtO" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/gQ5ofgEEMHnvnfAnzdZb" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Important Tip:** When the delete confirmation appears, turn on “Don’t ask again next time” to delete faster.
{% endhint %}

#### 1.4. Add menu items to the Menu Tree

To add a menu item, you have two options:

**Option 1&#x20;**<mark style="background-color:$warning;">**(Not recommended if you're new to Navi+)**</mark>**:** 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.

<figure><img src="/files/CrqQC7r9EVMRkz9R6TsS" alt=""><figcaption></figcaption></figure>

**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.

<figure><img src="/files/pXj1gIGJoLpGQHxvcXgO" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Erl0zEvJVACMNWS2oNqc" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="/files/EIZU8eCs1oLL0bqCcMZO" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/3xM2w1RqgpoOje6t5dn0" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/7pLEYkqLyXO98F9QiMpa" alt=""><figcaption></figcaption></figure>

Step 2: Choose display settings then PUBLISH THE MENU.

<figure><img src="/files/Rkn3CcxlZ43FFKCvun3E" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.shopifas.com/manual/website/help.naviplus.io/usage/fab-floating-menu-quick-access/how-to-use.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.