# 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. ## Playground ```html

``` ## 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 ```html ``` ### On mobile The brand, Search and Menu. Scrolling down, the header leaves; scrolling up, it returns. Show code ```html ``` ## Anatomy 1. **Brand:** the symbol and the name, leading home. 2. **Tools:** Search, language, day and night, GitHub; on mobile, Menu. 3. **Areas:** the site’s big sections; the current one in placed paper. ## Accessibility - The areas in a named `