Page Header
📘 Modo de Uso
O Page Header é utilizado no topo de uma página para exibir:
- O título principal,
- A localização atual do usuário dentro do sistema (breadcrumbs, se aplicável),
- Metadados relevantes sobre o conteúdo,
- Ações de alto nível relacionadas à página.
Ele ajuda a dar contexto imediato e organiza a navegação.
🧩 Anatomia
📋 Propriedades
⌨️ Código
opl.navigation.component.pageHeader
🎨 Variantes
- Com título simples – apenas o título principal.
- Com metadados – t ítulo acompanhado de informações complementares (ex.: data de atualização, autor, status).
- Com ações – inclui botões ou menus suspensos para ações rápidas no nível da página.
- Com breadcrumb integrado – quando há necessidade de reforçar a navegação hierárquica.
🛡️ Boas Práticas e Acessibilidade
- Títulos de página devem ser claros, exclusivos e descrever o propósito da página.
- WCAG 2.4.2 – Página intitulada.
- Evite títulos muito longos: o usuário deve compreender rapidamente o contexto.
- Se incluir botões de ação no header, garanta que eles sejam descritivos e tenham foco claro.
- Quando breadcrumbs estiverem presentes, verifique se seguem a mesma hierarquia já definida no componente Breadcrumb do DS.
- Em telas menores, priorize o título e esconda ou colapse elementos secundários (metadados, ações).