Pular para o conteúdo principal

Bottom Nav​

Componente Bottom Nav

📘 Modo de Uso​

O Bottom Nav é um componente de navegação fundamental para interfaces móveis.

Ele deve ser posicionado na parte inferior da tela e tem como objetivo fornecer acesso rápido a seções principais do aplicativo, permitindo que o usuário alterne entre diferentes áreas de forma prática e intuitiva.

É especialmente útil em aplicativos que possuem entre 3 e 5 destinos principais.

🧩 Anatomia​

Anatomia

📋 Propriedades​

Propriedades

⌨️ Código​

  • opl.navigation.component.bottomNav

🎨 Variantes​

Estados​

  • Default: Ícone/texto inativo.
  • Active: Destino selecionado.

Variações de estados

Opções​

  • Ícone + Texto
  • Apenas Ícone
  • Apenas Texto

🛡️ Boas Práticas e Acessibilidade​

  • Limite o Bottom Nav a 3 a 5 destinos principais. Mais do que isso pode sobrecarregar o usuário.
  • Use ícones reconhecíveis e, sempre que possível, combine com rótulos textuais para aumentar a clareza.
  • O destino ativo deve estar sempre destacado visualmente (cor, peso ou ícone preenchido).
  • Garanta contraste suficiente entre estados ativo e inativo (WCAG 2.1: 1.4.3 Contraste).
  • O botão deve ser acessível por teclado/leitores de tela e conter rótulos descritivos (aria-label).