English Tiếng Việt Français Deutsch 中文 日本語 Italiano Português Español
See demo Get started

Publish on Wix / Squarespace / Others

On WordPress? Use the dedicated Naviplus Menu Builder plugin instead of the manual embed below — no theme edits, place the Grid via shortcode or Gutenberg block.

On Shopify? Install the dedicated Shopify app — it’s optimised for the platform with built-in publish options.

This page covers the manual script embed method, which is the right path for Wix, Squarespace, Webflow, Magento, and custom websites built with PHP, Node.js, or pure HTML. You have the following implementation methods:

1. Embed Navi+ on Your Website

This implementation method is suitable for all menu types that Navi+ currently supports, including: Tabbar, Mega menu, Slide menu, FAB, and Grid menu. This code only needs to be used once for all menus.

<!-- Insert this code to the <head> of website. (c) naviplus.io -->
<script>(window._navi_setting ||= []).push({
   token: "NAVI123456"
});</script>
&lt;script src="https://live.naviplus.app/start.js" async&gt;&lt;/script&gt;
<!-- Insert this code to the <head> of website -->

FAQ (Frequently Asked Questions)

What is token?

Each Navi+ account is assigned a unique token. You can view and copy this token directly from the application header. The token is used to securely publish your menu.

What is https://live.naviplus.app/start.js?

This is Navi+’s fixed URL that contains the application’s initialization logic. The script is lightweight (around 4KB), allowing it to load quickly across most devices and network conditions. It is delivered via Cloudflare and BunnyCDN to provide stable global performance and reliable compatibility with modern browsers.

Using the async loading method also means it does not affect the website’s loading process.

Does this embed code slow down my website?

The code below is extremely lightweight and can be inserted into your website without affecting speed (only taking about 100-200ms for the first load and 0ms for subsequent loads), customer experience, or SEO scores

What is the best place to insert this code snippet?

In the head section (or as early as possible). Why? The website will sequentially load resources to render the interface. Placing Navi+ earliest in the HTML code will help your menu be ready to display as soon as possible by waiting until conditions are met, then the menu will immediately appear. This improves user experience.

How can I tell if this code has been successfully embedded on my website?

There are two ways:

Method 1 (for everyone):

Open your website with the suffix #navidebug-on, for example: https://domain.com#navidebug-on. If the website switches to Debug mode, the embed is working correctly. Debug mode helps you easily identify CSS selectors. Use #navidebug-off to turn it off.

Method 2 (for developers):

Open your browser’s inspect tools, go to the Console tab, and look for a green message: “Using Navi+..”. This message indicates that the code has been embedded successfully.

After embedding the script above, go to the Navi+ app to configure where and how your menu appears on the page.

I.1. Understanding CSS Selector

A CSS Selector is a way to target a specific HTML element on your webpage. Navi+ uses it to know exactly where to place your menu — whether to insert it before or after an element, or to replace an existing one entirely.

You don’t need to be a developer to use this. Navi+ provides a simple input field where you enter the selector, and it handles the rest.

To find the correct CSS Selector for your website, you can use:

  • Debug Mode — Navi+’s built-in tool: hover over any element on your page and instantly copy its selector
  • Browser DevTools — A manual method using your browser’s built-in inspector

I.2. Three publishing options

Step 1: Click the Publish to website button in the Navi+ app.

Step 2: Turn on toggle “Publish menu by Insert/Replace method”.

Step 3: Enter your CSS Selector and choose one of the three publishing options below.

Option 1: Insert Before

Inserts the Navi+ menu immediately before the selected element.

Example: CSS Selector main → the Grid Menu appears above the page's main content area, displayed as a full section.

This is the most common setup for a Grid Menu on non-Shopify platforms.

Common CSS selectors for this option:

  • main — works on most platforms (Webflow, Magento, custom sites)
  • #main — some platforms and custom themes
  • .main-content — various platforms

Not in this list? You can chat with a Navi+ supporter for instant help, or use Debug Mode or Browser DevTools to find it yourself.

Option 2: Insert After

Inserts the Navi+ menu immediately after the selected element.

Example: CSS Selector header → the Grid Menu appears just below the header.

Common CSS selectors for this option:

  • header — works on most platforms
  • .header-wrapper — some platforms
  • .site-header — various platforms

Not in this list? You can chat with a Navi+ supporter for instant help, or use Debug Mode or Browser DevTools to find it yourself.

Option 3: Replace

Replaces the selected element entirely with the Navi+ menu. The original element is hidden and Navi+ takes its place.

Most platforms do not have a built-in Grid Menu, so Replace mode is rarely applicable for this menu type. Insert Before main is the recommended approach.

If your platform does have a grid-style navigation element you want to replace, use Debug Mode or Browser DevTools to find its CSS Selector.

I.3. Device-specific targeting

You can control whether the CSS Selector applies on mobile, desktop, or both by adding a suffix to your selector:

Suffix Applies to
(M) Mobile only
(D) Desktop only
(none) Both mobile and desktop

Examples:

  • main(D) — inserts only on desktop
  • main(M) — inserts only on mobile
  • main — inserts on both platforms

This is useful when you want the Grid Menu to appear only on certain devices, or when you need different placement on mobile vs. desktop.

3. Insert a Navi+ Menu at Any Point on Your Website

The code below can be used multiple times on a website with different insertion information (especially the Embeded ID, such as SF-123456789). When the website is rendered, the menu will be deployed and displayed at the position where the code is inserted when conditions are met. This menu type is suitable for: Mega menu, Grid, etc.

<!-- Insert the code where the menu SF-123456789 appears. (c) naviplus.io -->
<div class="naviman_app section_naviman_app" id="SF-123456789-container"></div>
<script>(window._navi_setting ||= []).push({
   token: "NAVI123456",
   embed_id: "SF-123456789"
});</script>
&lt;script src="https://live.naviplus.app/start.js" async&gt;&lt;/script&gt;
<!-- Insert the code where the menu SF-123456789 appears -->

Important: The code above uses the sample embed code SF-123456789. Make sure to replace it with your actual menu embed code.