Explore menus comuns
👀 Quer vê-los em ação? View live demo → showcase.naviplus.io
A maioria das lojas usa apenas um tipo de menu — mas cada tipo serve a um propósito diferente. Combinar vários tipos de menu oferece aos seus clientes uma experiência muito melhor: uma Tab Bar para acesso instantâneo, um Slide Menu para catálogo profundo, um Mega Menu para descoberta em desktop, um FAB para suporte — cada um fazendo exatamente um trabalho, perfeitamente.
1. Tab Bar (também chamado: Bottom Navigation, Nav Bar, Bottom Nav)
Uma barra de navegação fixa — colocável na parte inferior, superior, esquerda ou direita. Contém 4–5 seções com ícone + rótulo. Faz sua loja parecer um aplicativo nativo. Funciona tanto em dispositivos móveis quanto em desktop. Melhor como navegação primária em todo o site — sempre visível, sempre ao alcance do polegar. Usado por: Shein, ASOS, Zara, Etsy, H&M, Nike, Uniqlo.
Plataforma: Desktop e Móvel (Extremamente popular)
Tab Bar — fixed nav bar with icon + label, feels like a native app
2. Slide Menu (também chamado: Drawer Menu, Hamburger Menu)
Desliza da esquerda ou da direita — itens ilimitados, sem limite de tamanho, se adapta à estrutura inteira do seu site. O padrão de navegação mais popular e amigável para dispositivos móveis. Pode ser acionado por um ícone de hambúrguer, um item da Tab Bar ou qualquer botão colocado ao alcance do polegar. Use-o para seu catálogo completo, links de conta, políticas e qualquer coisa que não precise estar sempre visível.
Plataforma: Móvel (Extremamente popular) · Desktop (menos comum)
Slide Menu — slides in from the side, unlimited depth and items
3. Desktop Mega Menu (também chamado: Dropdown Menu, Multi-column Menu)
Um dropdown de múltiplas colunas que se expande abaixo do cabeçalho — construído para cobrir toda a sua navegação em desktop em um só lugar. Aproveita ao máximo a tela grande com imagens, banners e layouts ricos em várias colunas. Substitui completamente o menu de cabeçalho padrão. O padrão para qualquer loja com um catálogo substancial em desktop.
Plataforma: Apenas Desktop (Extremamente popular)
Desktop Mega Menu — multi-column dropdown with images and rich layouts
4. Mobile Mega Menu (também chamado: Header Menu, Scrollable Top Menu)
Uma barra de menu compacta logo abaixo do cabeçalho — sempre visível, sem necessidade de toque. Rola horizontalmente ou se divide em abas para exibir suas principais categorias instantaneamente. Um dos padrões de navegação mais reconhecíveis em sites móveis. Melhor para lojas com 4–8 categorias prioritárias que os clientes devem acessar com um toque.
Plataforma: Apenas Móvel (Popular)
Mobile Mega Menu — always-visible horizontal bar just below the header
5. FAB & Support (também chamado: Floating Button, Speed Dial)
Um botão flutuante fixo em qualquer canto — sempre visível, independentemente da rolagem. Expande em várias ações: WhatsApp, Messenger, widgets de chat (Shopify Inbox, Tidio, Crisp), linha direta ou qualquer link personalizado. O primeiro lugar que os clientes olham quando precisam de ajuda ou documentos de suporte. Pode se ocultar automaticamente quando não necessário para economizar espaço na tela.
Plataforma: Desktop (popular) · Móvel (Extremamente popular)
FAB & Support — floating button that expands into chat, hotline, and quick actions
6. Grid Menu (também chamado: Icon Menu, Category Grid)
Uma grade de blocos — cada um com um ícone ou imagem e um rótulo. Embutido diretamente em qualquer seção da página, não é uma navegação em todo o site. Dá à sua loja uma aparência e sensação de aplicativo, ideal para exibir 6–12 categorias de relance. Funciona especialmente bem em páginas iniciais, páginas de destino e dentro de Slide Menus.
Plataforma: Móvel (Popular)
Grid Menu — icon + label tiles embedded into a page section
Como combiná-los
Você não precisa escolher apenas um. As lojas de melhor desempenho sobrepõem vários tipos de menu — cada um fazendo um trabalho específico:
| Objetivo | Recomendado |
|---|---|
| Navegação primária em todo o site no móvel | Tab Bar + Slide Menu |
| Navegação completa em desktop | Desktop Mega Menu |
| Exibir principais categorias no móvel | Mobile Mega Menu |
| Suporte e contato sempre visíveis | FAB & Support |
| Navegação visual de categorias na página inicial | Grid Menu |
→ Comece a construir seu menu →
Perguntas Frequentes
Quero que meu menu funcione bem no móvel. Qual tipo devo escolher?
Comece com uma Tab Bar ou Slide Menu — ambos são feitos para móveis. A Tab Bar oferece acesso instantâneo a 4–5 seções principais; o Slide Menu contém toda a estrutura do seu site sem limite de itens.
Minha loja tem muitas categorias. Como posso mostrá-las todas sem sobrecarregar os clientes?
Use um Desktop Mega Menu no desktop (multi-coluna, suporta imagens e banners) combinado com um Slide Menu no móvel (itens ilimitados, rolável). Cada um lida perfeitamente com sua plataforma.
Posso usar vários tipos de menu ao mesmo tempo?
Sim — e você deve. Uma combinação popular: Tab Bar (navegação primária) + Slide Menu (estrutura completa do site) + FAB (WhatsApp / suporte). Cada tipo serve a um propósito diferente sem sobreposição.
Quero que os clientes acessem facilmente o suporte ou entrem em contato comigo. O que devo adicionar?
Adicione um botão FAB & Support. Ele fica fixo em um canto da tela, sempre visível, e permite agrupar WhatsApp, Messenger, linha direta e widgets de chat em um único botão.
Onde devo colocar um Grid Menu?
Grid Menu não é uma navegação em todo o site — ele é embutido em uma seção da página (página inicial, página de categoria). Use-o para exibir visualmente 6–12 categorias em destaque como blocos estilo aplicativo.
E se eu escolher o tipo de menu errado?
Sem problemas — você pode adicionar, editar ou excluir menus a qualquer momento. Se quiser salvar seu trabalho, basta exportá-lo como um arquivo JSON para reutilizar depois. Pense nisso como salvar um documento do Word.
Estou no plano Starter com apenas 1 slot de menu. Como posso experimentar mais?
Faça upgrade para Business ou Elite — você recebe um teste gratuito de 7 dias para explorar tudo antes de se comprometer.
Posso importar meu menu existente para o Navi+?
Sim. O Navi+ suporta importação assistida por IA — mas você precisará ajustar o resultado. Aqui está o porquê: a maioria dos sites hoje tem um único Mega Menu que automaticamente se colapsa em um Hamburger Menu no móvel. O Navi+ oferece tipos de menu especializados em vez disso. Você precisará redistribuir seu conteúdo entre os tipos certos para obter a melhor experiência para seus clientes.