Installing Navi+ on WordPress takes about 15–30 minutes. Here’s the complete process — from downloading the plugin to having your first live menu.
What You’ll Need
- A WordPress or WooCommerce site (self-hosted, WordPress.com Business plan, or any WP hosting)
- Admin access to your WordPress site
- A free Navi+ account (create at dash.naviplus.app)
Step 1 — Install the Plugin
Option A: From WordPress.org
- In your WP Admin, go to Plugins → Add New
- Search for “Navi+ Menu Builder”
- Click Install Now, then Activate
Option B: Manual upload
- Download the plugin .zip from naviplus.io
- In WP Admin, go to Plugins → Add New → Upload Plugin
- Upload the .zip and activate
Step 2 — Connect to Your Navi+ Account
After activation, you’ll see a Navi+ item in the WP Admin sidebar.
- Click Navi+ → Settings
- Enter your Site ID and API key (found in your Navi+ dashboard under Settings → WordPress)
- Click Connect
If you don’t have a Navi+ account yet, you’ll be prompted to create one. The free plan covers all core features.
Step 3 — Choose Your Menu Type
From Navi+ → Menu Builder in WP Admin, create your first menu:
- Tab Bar → Best for WooCommerce stores with mobile-first audiences
- Mega Menu → Multi-column desktop navigation with categories and images
- Slide Menu → Hamburger/drawer style for modern stores
- FAB → Floating action button for promotions or contact shortcuts
- Grid Menu → Visual grid layout for category-heavy stores
Most WooCommerce stores benefit from deploying Tab Bar on mobile and Mega Menu on desktop simultaneously, using Navi+’s Smart Publish rules.
Step 4 — Build Your Menu (or Use AI)
Manual approach:
- Click Add Item to create menu entries
- Set the label, URL, and icon for each item
- Organize into the hierarchy you want
- Set design options (colors, fonts, spacing)
AI approach (recommended for WooCommerce):
- Click Generate with AI
- Navi+’s AI reads your WooCommerce product categories and taxonomy
- It generates a complete menu structure — you review and adjust
- Confirm and proceed to styling
Step 5 — Set Publish Rules
Under Smart Publish:
- Devices: Set the menu to show on Mobile, Desktop, or Both
- URLs: Configure which pages show which menu (optional)
- Conditions: Logged-in customers vs. guests (optional)
For a typical WooCommerce setup, set the Tab Bar to “Mobile only” and the Mega Menu to “Desktop only.”
Step 6 — Publish
Click Publish. Your menu goes live immediately — no theme file edits, no page builder changes, no developer needed.
Compatibility
Navi+ works with:
| WordPress Theme / System | Compatible |
|---|---|
| WordPress.org (self-hosted) | ✓ |
| WooCommerce | ✓ |
| Elementor | ✓ |
| Divi | ✓ |
| Avada | ✓ |
| Astra / OceanWP / GeneratePress | ✓ |
| Sage (Roots) / Timber | ✓ |
| Custom themes | ✓ (script-based) |
Troubleshooting
Menu not appearing? Check that the Navi+ script is loading on the correct pages. Go to Settings → Publish Rules and verify the URL conditions.
Conflict with existing menu? If you want Navi+ to replace your theme’s native menu, you can hide the theme header via a small CSS snippet (Navi+ support can provide this for your specific theme).
Slow load? Check that the CDN option is enabled in Navi+ Settings. This ensures assets are delivered from Navi+’s global CDN rather than your server.
Bottom Line
Installing Navi+ on WordPress takes 15–30 minutes and requires no coding. The AI menu generation from WooCommerce data is the fastest path to a well-organized, mobile-optimized navigation.
→ See the full comparison: Navi+ vs Max Mega Menu