Exemplos de cabeçalho de site para editar e copiar
Exemplos de cabeçalho de site
Exemplos de cabeçalho de site: 10 designs ao vivo em HTML e CSS | We.Inc
10 designs originais de cabeçalho de site que você pode editar ao vivo: layouts de logo e navegação, posição do CTA, cabeçalhos fixos, menus mobile sem JavaScript, além de um checklist de cabeçalho.
O cabeçalho de um site é a faixa no topo de cada página com o logo, a navegação principal e, em geral, um botão de ação. Bons cabeçalhos têm de cinco a sete links, colocam à esquerda o logo com link para a página inicial e se recolhem em um menu com rótulo no celular. Abaixo estão dez designs originais de cabeçalho com código editável.
Layouts de cabeçalho e quando usar cada um
Layout
Ideal para
Cuidado com
Logo à esquerda, links à direita
A maioria dos sites de empresas
Links demais empurrando o CTA para fora da tela
Logo à esquerda, links no centro, CTA à direita
Sites de SaaS e de serviços
Precisa de largura suficiente; recolha mais cedo
Logo centralizado, links embaixo
Lojas, restaurantes, sites editoriais
Um cabeçalho mais alto ocupa mais tela
Barra utilitária acima da barra principal
Negócios locais que vivem do telefone
Duas barras no celular; junte as duas
Barra fixa compacta
Páginas longas
Cobrir o destino das âncoras e o conteúdo
Galerias de cabeçalhos costumam mostrar imagens. Estes são cabeçalhos que funcionam de verdade, feitos em HTML e CSS puros com marcas inventadas, então você pode redimensionar o quadro, mudar o código e copiar a versão que combina com o seu site.
Filtre os exemplos por layout ou role pelos dez.
Edite o código de qualquer exemplo; o quadro isolado é redesenhado enquanto você digita.
Copie o HTML e o CSS e troque pelo seu logo, links e texto do botão.
Passe pelo checklist do final antes de publicar.
Envolva os links em um elemento nav com aria-label e marque a página atual com aria-current="page".
O elemento header só conta como o landmark de banner da página quando não está dentro de article, aside, main, nav ou section.
Cabeçalhos fixos precisam de um valor de top, como top: 0, senão position: sticky age como relative.
Adicione scroll-margin-top aos títulos quando o cabeçalho for fixo, para que links de salto não escondam o título embaixo da barra.
Mantenha cada área de toque com pelo menos 24 por 24 pixels CSS para cumprir o tamanho de alvo da WCAG 2.2 no nível AA; 44 pixels é mais confortável.
Perguntas frequentes
O que o cabeçalho de um site deve ter?
O logo com link para a página inicial, a navegação principal e, na maioria dos sites de empresas, um botão principal como Agendar ou Pedir orçamento. Negócios locais costumam adicionar um número de telefone. Deixe de fora o que os visitantes não precisam em todas as páginas.
Qual deve ser a altura do cabeçalho de um site?
Não existe regra fixa. Algo entre 56 e 80 pixels é comum para uma barra única no desktop, e menos no celular. Um cabeçalho fixo deve ser o mais baixo possível, porque cobre conteúdo o tempo todo.
Dá para fazer um menu mobile sem JavaScript?
Sim. Um elemento details com um summary como botão do menu abre e fecha os links de forma nativa e funciona com o teclado. O exemplo 6 desta página usa essa abordagem. Um botão em JavaScript com aria-expanded dá mais controle sobre a animação e o fechamento.
O cabeçalho deve ser fixo?
Em páginas longas, em que as pessoas precisam do menu ou do CTA com frequência, um cabeçalho fixo compacto ajuda. Em páginas curtas, ele mais ocupa espaço. Se usar um, mantenha-o fino e confira se os links internos param abaixo dele.
Posição do logo, da navegação e do CTA
As pessoas procuram o logo no canto superior esquerdo e esperam que ele as leve de volta à página inicial, então mantenha essa convenção, a menos que a sua marca tenha um bom motivo para centralizá-lo. Coloque o botão de ação na extremidade direita, onde o olhar termina de percorrer a barra.
Ordene os links pelo que os visitantes mais precisam, não pelo seu organograma. Serviços e preços normalmente vêm antes de Sobre.
Cabeçalhos no celular
Abaixo de uns 768 pixels, a maioria das fileiras de links não cabe mais. Recolha-as atrás de um botão Menu com rótulo claro e mantenha o CTA principal visível ao lado, já que ele é o único link que merece o espaço.
Teste com 375 pixels de largura. Se algo rolar para o lado, encurte os rótulos ou recolha mais cedo.
Checklist de cabeçalho de site
Confira isto antes de publicar
Verificação
Por quê
O logo leva à página inicial
O comportamento mais esperado de um cabeçalho
Os links estão dentro de um nav com rótulo
Leitores de tela o listam como navegação
Página atual marcada com aria-current
Anuncia onde o visitante está
Um botão principal, com estilo diferente
Deixa a ação principal óbvia
O botão de menu tem rótulo de texto visível
Um ícone sozinho passa despercebido facilmente
Contorno de foco visível em todo link
Quem usa teclado consegue ver onde está
Sem rolagem lateral em 375 px
É no celular que os cabeçalhos quebram primeiro
Barras fixas não escondem o destino dos links de salto
Corrija com scroll-margin-top
1. Clássico: logo à esquerda, links e botão à direita
O layout padrão de empresas. O botão é o último item, então é o ponto final do olhar.
2. Três zonas: logo, links centralizados, CTA
Comum em sites de software. Um grid mantém os links realmente centralizados, qualquer que seja a largura do logo.
3. Logo centralizado com links embaixo
Combina com lojas e restaurantes em que o nome da marca é o destaque. Os links quebram para uma segunda linha em telas estreitas.
4. Barra utilitária com telefone acima da barra principal
Para negócios locais que vivem de ligações: o número é um link tel: de verdade, para o celular discar.
5. Cabeçalho fixo compacto
Role dentro do quadro. position: sticky com top: 0 mantém a barra à vista; o fundo translúcido continua legível sobre o conteúdo.
6. Menu mobile com details e summary, sem JavaScript
O summary é o botão Menu; o navegador cuida de abrir, fechar e do teclado. Telas largas mostram os links em linha.
7. Cabeçalho escuro com busca
O campo de busca tem um rótulo escondido visualmente, para que os leitores de tela ainda o anunciem.
8. Cabeçalho transparente sobre um hero
O cabeçalho fica sobre a cor do hero. Mantenha o contraste do texto em 4.5:1 ou mais em relação ao que estiver atrás.
9. Cabeçalho de loja com barra de avisos
Uma linha curta de aviso acima da barra traz uma oferta; a contagem do carrinho fica no texto do link para ser lida em voz alta.
10. Cabeçalho mobile que mantém o CTA visível
No celular, os links se recolhem, mas o botão de agendamento fica ao lado do menu, já que é a ação que importa.