Header
Der Kopf einer Dokumentations- oder institutionellen Website: Marke, Bereiche und Werkzeuge. Auf mobilen Geräten werden die Bereiche und die Auswahloptionen in das Menü verschoben.
Auf dieser Seite
Playground
Breite
Hintergrund
<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="Bereiche"><a href="#playground">Design</a><a href="#playground">Entwicklung</a><a href="#playground" aria-current="true">Komponenten</a><a href="#playground">Ressourcen</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>Suchen</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>Wann verwenden
- Oben auf einer Website mit wenigen großen Bereichen: Dokumentation, Produktseite.
Wann nicht verwenden
- Auf einem Produktarbeitsbildschirm: AppShell-Kopf mit Navigation im Drawer.
Beispiele
Bei großen Bildschirmen
Das Branding, die Bereiche (der aktuelle in platziertem Papier) und die Werkzeuge: Suche, Sprache, Tag und Nacht sowie GitHub. Der Header dieser Seite ist einer.
Code anzeigen
<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>Auf Mobilgeräten
Das Branding, die Suche und das Menü. Beim Scrollen nach unten geht der Header weg; beim Scrollen nach oben kehrt er zurück.
Code anzeigen
<!-- o mesmo HTML: as áreas e as escolhas somem e o Menu aparece abaixo de 64rem -->Anatomie
- Brand: Symbol und Name, führend nach Hause.
- Werkzeuge: Suche, Sprache, Tag und Nacht, GitHub; auf dem Handy das Menü.
- Bereiche: die großen Abschnitte der Seite; der aktuelle in platziertem Papier.
Barrierefreiheit
- Die Bereiche in einem benannten
<nav>; der aktuelle mitaria-current. - Der Header kehrt zurück, wenn der Fokus ihn erreicht.
Attribute
| Attribut | Werte | Zum Zweck |
|---|---|---|
class="site-header" | am <header> | Der Header, am oberen Rand auf dem Handy verankert. |
class="areas" | die Bereiche <nav> | Nur für breite Bildschirme. |
class="tools" | die Werkzeuge | An Ende; auf Mobile nur Suche und Menü. |