Pular para o conteúdo principal

Topbar​

Componente Topbar

📘 Modo de Uso​

O componente TopBar é usado para fornecer acesso rápido a diferentes seções de um aplicativo ou site, geralmente posicionado na parte superior da tela.

É ideal para:

  • Navegação global em sistemas e portais;
  • Identidade da aplicação (ex.: logo e título principal);
  • Acesso a ações rápidas, como busca, notificações, perfil ou configurações.

🧩 Anatomia​

Anatomia

📋 Propriedades​

Propriedades

🧩 Exemplos de Uso e Responsividade​

Exemplos de Uso e Responsividade

  • Mobile (base/sm): a TopBar deve priorizar navegação colapsada (hambúrguer menu).
  • Tablet (md): pode exibir parte dos menus, mas ainda deve prever compactação.
  • Desktop (lg+): a TopBar pode exibir menus completos, barra de pesquisa e ações secundárias.

⌨️ Código​

  • opl.navigation.component.topBar

🛡️ Boas Práticas e Acessibilidade​

  • Sempre mantenha a logo clicável, levando para a home.
  • Garanta contraste suficiente entre texto/ícones e o fundo (WCAG 2.1 - 1.4.3).
  • Se houver campo de busca, ofereça atalho por teclado (ex.: Ctrl + K).
  • Evite sobrecarregar a TopBar com muitas ações. Priorize de 3 a 5 elementos principais.
  • Use rótulos claros em ícones (aria-labels) para leitores de tela.