Header
O cabeçalho de um site de documentação ou institucional: a marca, as áreas e as ferramentas. No mobile, as áreas e as escolhas vão para o Menu.
Nesta página
Playground
Largura
Fundo
<div class="header-sample" style="inline-size: 100%"><div class="feitio-header-wrap"><header class="feitio-header"><a class="brand" href="#playground">Feitio</a><nav class="areas" aria-label="Áreas"><a href="#playground">Design</a><a href="#playground">Desenvolvimento</a><a href="#playground" aria-current="true">Componentes</a><a href="#playground">Recursos</a></nav><div class="tools"><button class="feitio-button" type="button" data-size="small"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-search"></use></svg>Buscar</button><button class="feitio-button wide-only" type="button" data-size="small">PT</button><button type="button" class="feitio-button menu" data-size="small" popovertarget="pg-header-menu" aria-controls="pg-header-menu">Menu<svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-menu"></use></svg></button></div></header></div></div>Quando usar
- No topo de um site com poucas áreas grandes: a documentação, uma página de produto.
Quando não usar
- Numa tela de trabalho de um produto: o cabeçalho do AppShell, com a navegação no Drawer.
Exemplos
Na tela larga
A marca, as áreas (a atual em papel colocado) e as ferramentas: Buscar, idioma, dia e noite e o GitHub. O cabeçalho desta página é um.
Mostrar código
<header class="site-header">
<a class="brand" href="/">…Feitio</a>
<nav class="areas" aria-label="Áreas">…</nav>
<div class="tools">…Buscar · idioma · luz · GitHub · Menu</div>
</header>No mobile
A marca, o Buscar e o Menu. Ao rolar para baixo, o cabeçalho sai; ao rolar para cima, volta.
Mostrar código
<!-- o mesmo HTML: as áreas e as escolhas somem e o Menu aparece abaixo de 64rem -->Anatomia
- Marca: o símbolo e o nome, levando ao início.
- Ferramentas: Buscar, idioma, dia e noite, GitHub; no mobile, o Menu.
- Áreas: as seções grandes do site; a atual em papel colocado.
Acessibilidade
- As áreas num
<nav>com nome; a atual comaria-current. - O cabeçalho volta quando o foco entra nele.
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="site-header" | no <header> | O cabeçalho, preso no topo no mobile. |
class="areas" | o <nav> das áreas | Só na tela larga. |
class="tools" | as ferramentas | No fim; no mobile, só Buscar e Menu. |