NavBar
Barra de navegação inferior em telas menores — atalhos para as áreas principais.
Barra de navegação fixada no rodapé em telas menores (MeNavBar), com atalhos para as áreas principais do produto. É o equivalente mobile do Layout: no desktop a navegação principal fica horizontal na app bar azul do topo (Header); em telas estreitas, desce para o rodapé, ao alcance do polegar.
Quando usar
- Em telas estreitas, para dar acesso de um toque às áreas principais (Dashboard, Transações, Fornecedores, Catálogos).
- No máximo quatro itens visíveis — acima disso, o excedente vai pro mapa do site (mais itens competindo viram ruído e erram o alvo no toque).
Itens de navegação
Até quatro atalhos para as áreas principais. O item ativo é destacado automaticamente pela rota atual — o usuário sempre sabe onde está sem reler os rótulos. Cada item é ícone + rótulo de texto + destino.
Mapa do site
Para ir além dos quatro atalhos, o NavBar abre o mapa do site — a mesma árvore de áreas e seções do Header, agrupando cada área e seus filhos. Mantém o acesso completo sem lotar a barra.
Cor
Segue o contrato de marca do Header: sem cor definida, usa o primário com texto invertido. No ME, use a cor da marca via tokens — nunca HEX cru.
Onde se aplica
No código
Componente EletroDS (MeNavBar) — API, props e preview ao vivo no doc técnico: eletro.design/components/navbar. Aqui o foco é o uso em Design.
Acessibilidade
- É um landmark de navegação (
<nav>com nome, ex.: "Navegação principal"). - Item ativo marcado com
aria-current="page"— não só pela cor. - Cada item tem rótulo de texto (não dependa só do ícone) e alvo ≥ 44px (navegação por toque/polegar).
- Foco visível e ordem de tabulação coerente.