Como usar?

Tab Bar - também conhecido como Bottom Navigation Bar, Bottom Nav, ou Tab Navigation - é um estilo de navegação moderno usado por marcas globais como Shein, ASOS, Zara, Etsy, H\&M, Nike, e Uniqlo para melhorar a experiência do usuário móvel. Funciona bem para sites de todos os tamanhos e é eficaz tanto em dispositivos móveis quanto em desktop.

Principais Benefícios:

  • Coloca links importantes ao alcance fácil para acesso rápido e conveniente
  • Centraliza a navegação chave, ajudando usuários e motores de busca a entender melhor seu site – ótimo para SEO
  • Oferece uma aparência moderna e profissional que segue as tendências atuais de design UX e mobile-friendly
  • Permanece visível em todas as páginas, para que os clientes nunca percam links importantes como promoções, produtos em alta ou ofertas de adesão

FAQ:

1. Eu ainda não decidi se vou usar a versão gratuita ou paga. Posso experimentar os modelos de menu profissionais?

Com certeza! Os grupos de menu são principalmente para ajudar iniciantes a evitar se sentir sobrecarregados por recursos avançados no Navi+ 😄. A melhor maneira é experimentar os menus profissionais para explorar todos os recursos e opções de layout. Depois, você pode simplesmente excluir qualquer menu que não precise ou ache inadequado.

2. Criar um menu aqui faz com que ele apareça no meu site imediatamente?

Ainda não. Você precisará publicar o menu correto para que ele apareça no seu site. Não se preocupe — é fácil!

3. E se eu escolher o modelo errado ou cometer um erro?

Sem problemas. Você pode excluí-lo e criar um novo a qualquer momento. Se você estiver testando um menu e quiser experimentar outro modelo, pode salvar o atual como um arquivo de backup e reabri-lo mais tarde. Você pode até copiar e colar partes entre menus (abrindo duas abas do navegador) para manter seu trabalho anterior. Sinta-se à vontade para experimentar!

4. Devo criar apenas um menu ou vários?

Você deve criar vários menus. Apenas o menu ativo será exibido em seu site, mas você pode preparar muitas versões — selecionando diferentes modelos ou clonando menus. Menus podem ser configurados para mostrar/ocultar com base no tipo de página (início, produto, coleção...), dispositivo (móvel ou desktop) ou palavras-chave de URL. Então, vá em frente e construa menus que se encaixem em cada situação!

Passo 1: Edite a árvore de menu

1.1. Entendendo a Árvore de Menu

A árvore de menu é a parte mais importante de qualquer menu — ela define a estrutura.

Aqui está um exemplo de uma árvore de menu:

Home  
Catalog 
- All Mountain  
   - Cruise Flex  
   - Balance Ride
- Freestyle  
   - Park Board  
   - Jib Board  
- Freeride  
Support  
More

Esta é uma árvore de menu de 3 níveis. O nível 1 inclui Home, Catalog, Support e More. All-Mountain é um item de menu de nível 2, com dois itens filhos: Cruise Flex e Balance Ride.

Você passará a maior parte do seu tempo construindo esta árvore de menu para seu site, ajudando os clientes a encontrar o conteúdo que estão procurando.

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.
Cruise Flex, Balance Ride: Level 3 menu item that appears when you tap on All-Mountain.

1.2. Interações Básicas com a Árvore de Menu

Você pode arrastar e soltar itens de menu para cima e para baixo ou para a esquerda e para a direita para mudar sua posição e relacionamentos pai-filho na árvore de menu.

Quando você passar o mouse sobre qualquer item de menu, verá opções adicionais: editar os detalhes do item, excluí-lo da árvore de menu ou copiá-lo e colá-lo em outro lugar.

Dica: Você pode copiar um item de menu de um menu para outro abrindo o aplicativo Navi+ em duas abas do navegador.

1.3. IMPORTANTE! Exclua os itens de menu de exemplo e mantenha apenas a estrutura que você deseja.

Esta é uma situação comum ao criar um menu com o Navi+. Quando você cria um novo menu, incluímos um exemplo completo com itens de menu populares para mostrar ideias de layout e permitir que você copie/cole conforme necessário. No entanto, se você é novo no Navi+ e está usando o plano Starter, verá muitos avisos vermelhos (i) para recursos que não estão disponíveis, como upload de imagens ou uso de interações avançadas.

Se você gosta desses recursos avançados, considere fazer upgrade para um plano Business ou Elite. Mas se você quiser continuar com o plano Starter, por favor, encontre e exclua os itens de menu com avisos vermelhos (i).

Dica Importante: Quando a confirmação de exclusão aparecer, ative “Não perguntar novamente na próxima vez” para excluir mais rápido.

1.4. Adicione itens de menu à Árvore de Menu

Para adicionar um item de menu, você tem duas opções:

Opção 1 **(Não recomendado se você é novo no Navi+)**: Clique em “Adicionar menu” para inserir um item de menu em branco no final da árvore de menu. Este método requer um bom entendimento das configurações do item de menu, que abordaremos abaixo. Pode parecer esmagador no início, então você pode explorar isso mais tarde.

Opção 2 (Recomendada): Já preparamos muitos modelos de itens de menu bem projetados para você. Basta copiá-los e colá-los no lugar certo. Depois de terminar sua árvore de menu, basta excluir os modelos não utilizados.