Header
The header of a documentation or institutional site: the brand, the areas and the tools. On mobile, the areas and the choices move into the Menu.
On this page
Playground
Width
Background
<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="Areas"><a href="#playground">Design</a><a href="#playground">Development</a><a href="#playground" aria-current="true">Components</a><a href="#playground">Resources</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>Search</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>When to use
- At the top of a site with a few big areas: documentation, a product page.
When not to use
- On a product work screen: the AppShell header, with the navigation in the Drawer.
Examples
On wide screens
The brand, the areas (the current one in placed paper) and the tools: Search, language, day and night, and GitHub. This page’s header is one.
Show 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>On mobile
The brand, Search and Menu. Scrolling down, the header leaves; scrolling up, it returns.
Show code
<!-- o mesmo HTML: as áreas e as escolhas somem e o Menu aparece abaixo de 64rem -->Anatomy
- Brand: the symbol and the name, leading home.
- Tools: Search, language, day and night, GitHub; on mobile, Menu.
- Areas: the site’s big sections; the current one in placed paper.
Accessibility
- The areas in a named
<nav>; the current one witharia-current. - The header comes back when focus enters it.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="site-header" | on the <header> | The header, pinned to the top on mobile. |
class="areas" | the areas <nav> | Wide screens only. |
class="tools" | the tools | At the end; on mobile, only Search and Menu. |