Header
O Header centraliza recursos essenciais de navegação e interação do usuário, garantindo acesso consistente a funcionalidades-chave em todas as páginas do site.
Uso
Use o Header para estruturar a navegação principal do site, oferecendo acesso rápido a funcionalidades como menu, login, busca e ações promocionais. Ele deve estar presente em todas as páginas, mantendo consistência e previsibilidade na experiência do usuário. A composição do Header varia de acordo com o espaço disponível na tela e o idioma do usuário, adaptando sua apresentação responsivamente para preservar usabilidade e performance.
Anatomia
❖ Container
Agrupamento geral do componente. É nele que a sombra é ativada quando o usuário realiza scroll na tela.
1. Menu Burger
Botão que abre o menu de navegação principal. Exibe os links prioritários do site.
Sempre visível.
Recebe um ícone como conteúdo obrigatório.
Pode variar de cor ou estilo dependendo do tema (ex: tema clássico ou neutro).
2. Logo Button
Marca do produto no topo da interface. Serve também como link de retorno à página inicial.
Deve conter o logotipo do produto (imagem obrigatória).
Fixo no layout e com espaçamento proporcional ao grid.
3. Search
Área dedicada à pesquisa.
Em telas pequenas, é um botão com ícone de lupa (Common Button).
Em telas maiores, se transforma em uma Search Bar aberta.
Recebe texto de placeholder (opcional) e ícone (obrigatório).
Interação ativa: ao clicar, abre a barra ou direciona para a busca.
4. Marketing Button
Botão que promove ações estratégicas como assinatura.
Estilo visual fora do padrão do Design System (ex: cor customizada, sem restrição de skin).
Recebe label e ícone (ambos opcionais, mas recomendados para testes A/B).
Visibilidade depende do espaço disponível na tela.
5. Login Button / Menu do usuário
Comportamento adaptável ao estado do usuário e ao tamanho da tela:
Usuário deslogado em telas pequenas: Thumbnail Button compacto com ícone.
Usuário deslogado em telas maiores: Segmented Button com label e overflow.
Usuário logado: sempre versão compacta com thumbnail e acesso ao menu do usuário.
Recebe ícone do avatar (obrigatório) e, quando expandido, label de chamada para login.
Mobile e tablet
Versão otimizada para dispositivos móveis, com priorização de elementos essenciais de navegação e economia de espaço.
Nessa variante, o padding esquerdo deve ignorar o margin predefinido pelo grid e utilizar um espaçamento personalizado de 12px [ref-spacing-small12], para facilitar o alinhamento do Menu Burger ao restante do conteúdo da página.
Layout Responsivo
O layout se adapta conforme a largura da tela e o idioma, impactando a visibilidade e o tamanho de alguns elementos.
Anatomia - Search Bar
Após o clique no ícone de busca, o header se transforma em sua versão Search Bar.
Desktop
Para dispositivos desktop, esta variante permite acesso rápido ao menu burger, busca e menu do usuário. E por ter mais espaço, a busca é oferecia como aberta como Search Bar e com o botão de chamada para login também em sua versão extended.
Nesta versão os paddings laterais respeitam normalmente o margin previsto nas definições do grid.
Histórico de Atualizações
Atualizado