Instale o Navi+

Passo 1 — Instalar

Shopify: Instale a partir da Shopify App Store. O aplicativo abre automaticamente após a instalação.

Outras plataformas (WordPress, WooCommerce, Wix, Webflow, Squarespace ou qualquer site):

  1. Crie uma conta gratuita em dash.naviplus.app
  2. Adicione o domínio do seu site
  3. Copie seu snippet de incorporação — você usará isso no Passo 2

Passo 2 — Entenda como seu menu será implementado

O Navi+ usa três métodos de implementação diferentes dependendo do tipo de menu. Entender isso antecipadamente economiza tempo durante a configuração.

1. Menus flutuantes — Tab Bar & FAB

Tab Bar e FAB são menus fixos que flutuam no topo da sua página em uma posição fixa. Eles nunca rolam para fora.

📍
Posição
Parte superior, inferior, esquerda ou direita da tela
🔼
Ocultar automaticamente ao rolar
Oculta ao rolar para baixo, reaparece ao rolar para cima
👇
Mostrar ao rolar para baixo
Oculto por padrão, aparece apenas quando o usuário rola para baixo — economiza espaço na tela

Um caso de uso comum: consolidar outros elementos flutuantes — WhatsApp, Crisp, Messenger, widgets de chat ao vivo — em itens de menu do Navi+. Isso libera espaço na tela e remove a desordem de vários ícones flutuantes empilhados uns sobre os outros.

2. Menus posicionados — Mega Menu & Grid Menu

Mega Menu e Grid Menu precisam ser colocados em um local específico na sua página. Existem várias maneiras de fazer isso:

🎯
CSS Selector
Apontar o Navi+ para qualquer elemento na sua página. Inserir antes, depois ou substituir completamente — é assim que o Mega Menu pode substituir totalmente a navegação existente do seu tema.
🧩
Seção do Shopify
Use um App Block dentro do Theme Customizer para colocar o menu em qualquer seção do seu layout — sem necessidade de código.
🖥️
Código de incorporação
Cole um snippet curto diretamente no HTML da sua página no exato local onde o menu deve aparecer.

CSS Selector é uma maneira de identificar qualquer ponto em uma página da web — é assim que os navegadores direcionam elementos específicos. O Navi+ o usa para saber exatamente onde injetar seu menu. Você não precisa escrever CSS você mesmo; o Navi+ tem um seletor visual que encontra o seletor para você.

3. Menus acionados — Slide Menu

Slide Menu não aparece por conta própria. Ele permanece oculto até que algo o acione:

Elemento existente
Um usuário clica em algo que já está na sua página — como o ícone de hambúrguer do seu tema
Gatilho personalizado
Qualquer elemento na sua página — designado pelo seu CSS Selector
🔗
Outro menu Navi+
Um item da Tab Bar ou FAB que abre o Slide Menu quando clicado

Isso torna o Slide Menu flexível — ele pode substituir sua navegação existente sem adicionar visualmente nada novo à página.


Passo 3 — Crie seu primeiro menu

Uma vez instalado, vá para o painel e crie seu primeiro menu. → Seu primeiro menu (início rápido de 5 minutos)