Navigator
Navigators montam menus fixos para alternar rapidamente entre telas relacionadas, mantendo a experiência alinhada.
Quando usar
- Construir navegação inferior em apps mobile.
- Alternar entre seções principais que compartilham layout base.
- Destacar até cinco destinos que precisam estar sempre acessíveis.
- Complementar headers simples quando abas ou drawer não fazem sentido.
Exemplo básico
Navigator replicado em telas do mesmo fluxo
Por quê: replica o mesmo menu em cada tela do grupo para garantir consistência.
Variantes
Navigator sem ícones
Quando usar: priorizar textos curtos quando os ícones não agregam contexto. Por quê: reduz ruído visual e favorece leitura rápida dos rótulos.
Navigator com ícones Lucide
Quando usar: acelerar reconhecimento visual dos destinos principais. Por quê: ajuda a localizar telas frequentes apenas pelo símbolo.
Navigator com destaque para três telas
Quando usar: destacar as telas mais relevantes de um fluxo reduzido. Por quê: três itens mantêm foco no essencial sem sobrecarregar o menu.
Composição (usando com outros)
- Navigator + Container — mantém conteúdo alinhado com navegação fixa.
- Navigator + Screen — aplicado em cada tela do grupo para consistência.
- Navigator + Fab — combina navegação persistente com ação global.
Navigator com FAB complementar
Por quê: mantém navegação fixa enquanto o FAB oferece atalhos de ação.
Slots & Props
| Nome | Tipo | Padrão | Descrição | Obrigatório |
|---|---|---|---|---|
navigator | bloco | — | Declara menu com itens linha a linha. | Sim |
itens | `- label | Destino` | — | Cada entrada aponta para tela existente. |
ícones | token i- | — | Opcional para reforçar a identificação visual. | Não |
nome | identificador | — | Opcional após navigator para documentar o menu. | Não |
Erros comuns (Do/Don’t)
❌ Errado — Menu inconsistente
✅ Correto — Itens alinhados
Por quê: consistência evita que a pessoa perca destinos ao alternar telas.
❌ Errado — Lista usada como menu
✅ Correto — Menu com navigator
Por quê: navigator aplica semântica e comportamento apropriados para menus.
Referências cruzadas
Relacionados
Screen: destino principal de cada item do menu.Button: ações locais que complementam a navegação.Fab: atalho global coexistindo com menus fixos.Drawer: alternativa lateral para navegação contextual.
Composições recomendadas
- Navigator + Fab → navegação persistente com ação global.
- Navigator + Container → conteúdo central alinhado ao menu inferior.
- Navigator + Drawer → menu inferior + painel lateral para contexto extra.
Navigator e drawer combinados
Por quê: navigator cuida da navegação global enquanto o drawer filtra o conteúdo atual.