Header
El encabezado de un sitio de documentación o institucional: la marca, las áreas y las herramientas. En móvil, las áreas y las opciones se mueven al Menú.
En esta página
Playground
Ancho
Fondo
<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">Diseño</a><a href="#playground">Desarrollo</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">Menú<svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-menu"></use></svg></button></div></header></div></div>Cuándo usarlo
- En la parte superior de un sitio con pocas grandes áreas: documentación, una página de producto.
Cuándo no usarlo
- En una pantalla de trabajo de producto: el encabezado AppShell, con la navegación en el Drawer.
Ejemplos
En pantallas anchas
La marca, las áreas (la actual en papel colocado) y las herramientas: Búsqueda, idioma, día y noche, y GitHub. El encabezado de esta página es uno.
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>En móvil
La marca, la Búsqueda y el Menú. Al hacer scroll hacia abajo, el encabezado se va; al hacer scroll hacia arriba, vuelve.
Mostrar código
<!-- o mesmo HTML: as áreas e as escolhas somem e o Menu aparece abaixo de 64rem -->Anatomía
- Marca: el símbolo y el nombre, que llevan a casa.
- Herramientas: Búsqueda, idioma, día y noche, GitHub; en móvil, Menú.
- Áreas: las grandes secciones del sitio; la actual en papel colocado.
Accesibilidad
- Las áreas en un
<nav>nombrado; la actual conaria-current. - El encabezado vuelve cuando el foco entra.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="site-header" | en el <header> | El encabezado, fijado arriba en móvil. |
class="areas" | las áreas <nav> | Solo pantallas anchas. |
class="tools" | las herramientas | Al final; en móvil, solo Búsqueda y Menú. |