Header
L'en-tête d'un site de documentation ou institutionnel : la marque, les zones et les outils. Sur mobile, les zones et les choix se déplacent vers le Menu.
Sur cette page
Playground
Largeur
Fond
<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="Zones"><a href="#playground">Design</a><a href="#playground">Développement</a><a href="#playground" aria-current="true">Composants</a><a href="#playground">Ressources</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>Rechercher</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>Quand l'utiliser
- En haut d'un site avec quelques grandes zones : une documentation, une page de produit.
Quand ne pas l'utiliser
- Sur un écran de travail de produit : l'en-tête AppShell, avec la navigation dans le Drawer.
Exemples
Sur les écrans larges
La marque, les zones (la actuelle dans le papier placé) et les outils : Recherche, langue, jour et nuit, et GitHub. L'en-tête de cette page est un seul.
Afficher le code
<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>Sur mobile
La marque, la Recherche et le Menu. En descendant, l'en-tête part ; en remontant, il revient.
Afficher le code
<!-- o mesmo HTML: as áreas e as escolhas somem e o Menu aparece abaixo de 64rem -->Anatomie
- Marque : le symbole et le nom, menant à domicile.
- Outils : Recherche, langue, jour et nuit, GitHub ; sur mobile, Menu.
- Zones : les grandes sections du site ; la actuelle dans le papier placé.
Accessibilité
- Les zones dans un
<nav>nommé ; la actuelle avecaria-current. - L'en-tête revient quand le focus y entre.
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
class="site-header" | sur le <header> | L'en-tête, fixé en haut sur mobile. |
class="areas" | les zones <nav> | Écrans larges uniquement. |
class="tools" | les outils | À la fin ; sur mobile, seulement Recherche et Menu. |