Install Navi+

Step 1 — Install

Shopify: Install from the Shopify App Store. The app opens automatically after installation.

Other platforms (WordPress, WooCommerce, Wix, Webflow, Squarespace, or any website):

  1. Create a free account at dash.naviplus.app
  2. Add your website domain
  3. Copy your embed snippet — you’ll use this in Step 2

Step 2 — Understand how your menu will be deployed

Navi+ uses three different deployment methods depending on the menu type. Understanding this upfront saves time during setup.

1. Floating menus — Tab Bar & FAB

Tab Bar and FAB are sticky menus that float on top of your page at a fixed position. They never scroll away.

📍
Position
Top, bottom, left, or right edge of the screen
🔼
Auto-hide on scroll
Hides when scrolling down, reappears when scrolling back up
👇
Show on scroll down
Hidden by default, appears only when the user scrolls down — saves screen space

A common use case: consolidate other floating elements — WhatsApp, Crisp, Messenger, live chat widgets — into Navi+ menu items. This frees up screen space and removes the clutter of multiple floating icons stacking on top of each other.

2. Positioned menus — Mega Menu & Grid Menu

Mega Menu and Grid Menu need to be placed at a specific location on your page. There are several ways to do this:

🎯
CSS Selector
Point Navi+ to any element on your page. Insert before, after, or replace it entirely — this is how Mega Menu can fully replace your theme's existing navigation.
🧩
Shopify Section
Use an App Block inside the Theme Customizer to drop the menu into any section of your layout — no code needed.
🖥️
Embed code
Paste a short snippet directly into your page's HTML at the exact spot where the menu should appear.

CSS Selector is a way to identify any point on a webpage — it’s how browsers target specific elements. Navi+ uses it to know exactly where to inject your menu. You don’t need to write CSS yourself; Navi+ has a visual picker that finds the selector for you.

3. Triggered menus — Slide Menu

Slide Menu does not appear on its own. It stays hidden until something triggers it:

☰
Existing element
A user clicks something already on your page — like your theme's hamburger icon
⚡
Custom trigger
Any element on your page — designated by its CSS Selector
🔗
Another Navi+ menu
A Tab Bar or FAB item that opens the Slide Menu when clicked

This makes Slide Menu flexible — it can replace your existing navigation without visually adding anything new to the page.

Step 3 — Create your first menu

Once installed, head to the dashboard and create your first menu. → Your first menu (5-minute quickstart)