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
O Header é a principal estrutura de navegação do site. 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, mantendo a responsividade.
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.
No header colapsado, é um botão com ícone de lupa (Common Button).
No header aberto, 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 e header colapsado: Thumbnail Button compacto com ícone.
Usuário deslogado e header aberto: 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.
Versão colapsada
Versão otimizada para telas menores, com priorização de elementos essenciais de navegação e economia de espaço.
Nessa variante, a Margin esquerda ignora o predefinido pelo grid e utiliza um espaçamento personalizado de 12px [ref-spacing-small12], para facilitar o alinhamento.
Aplicação
Mobile e Tablet: Sempre usam a versão colapsada
Desktop: Usa a versão colapsada em telas menores que 800px
Lógica de Escala e Prioridade
Nos menores tamanhos de tela, a versão colapsada mostra apenas itens essenciais:
Menu Burger
Logo
Ícone de busca
Avatar para login
Assim que houver tamanho disponível, o botão
marketing-buttoné o primeiro a ser exibido.
Assim que houver tamanho disponível, a prioridade passa a ser do login, que deixa de ser um avatar e se torna o
segmented-button
Anatomia - Search Bar
Após o clique no ícone de busca, o header se transforma em sua versão Search Bar.
Versão aberta
Exibida para dispositivos desktop com mais de 800px.
Por ter mais espaço, a busca é oferecida aberta como Search Bar e o botão de login usa sua versão extended.
Tamanho mínimo da barra de pesquisa: 350px
Tamanho máximo da barra de pesquisa: 600px
A prioridade, nessa versão, passa a ser a barra de pesquisa. Caso a tela tenha tamanho suficiente, o marketing-button passa a ser exibido
Nesta versão as margens laterais respeitam normalmente o margin previsto nas definições do grid.
OBS: Para que haja equilíbrio visual em telas grandes (após o tamanho máximo da Search Bar), é importante que os controles do lado direito (login, marketing button) e do lado esquerdo (menu burger, logo) sempre ocupem um container de mesmo tamanho.
Nesse caso, o container de menor tamanho ganha pixels para se igualar ao de maior tamanho.
Histórico de Atualizações
Atualizações por data
Agosto 2025
06/05/2025
Atualização estrutural do header com a adição do Marketing Button e atualização da chamada de Login. Com isso, gerando regras de breakpoint.
Dezembro 2024
03/12/2024
Atualização estrutural e organizacional do componente
Documentação do componente
Maio 2025
20/05/2025
Atualização do componente, adicionando novas regras de responsividade
Janeiro 2026
29/01/2026
Atualização do componente, adicionando novas regras de responsividade
Adaptação de novas regras de grid e documentação
Percebeu um erro, ficou com dúvida ou tem uma sugestão?
Contribua com o Kósmos preenchendo nosso formulário de contribuição — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo para todo o time.
Atualizado