The header is placed at the top of the layout for site-wide content and contains any combination of a logo, headings, navigation menus and search bars. While multiple header elements are allowed on a single page, they can not be placed within other header, footer or address regions. If a header element is nested inside an article or section region, the header is considered a header for that region, not the whole page or site.
The Pharos Header provides three slots that removes some of the intricacies of laying out links and navigation elements: start, center and end. The three slots correspond to the first, second and third column of the header, as shown below.
- Use Pharos dropdown menu nav and their related components for navigation portion of the header
- Use Pharos links for static links
- Use the start, center and end props to place components in the correct spaces
- Don't place the Pharos Header component in another header, footer or address region
- Don't associate a header with the whole page if it is nested in a <section> or <article> element
The content contained in the header can be seen as information pertinent to all facets of the site. They generally serve as unifying core functionalities central to the purpose of the site. Hence, the header should be placed in a highly visible and consistent position shared across pages.
Use of Pharos components is highly recommended to deliver a consistent experience throughout both the design and functional needs. Some Pharos components which fit naturally with the header are the dropdown menu nav, link and input components, as shown at the example at the bottom of the page.
W3 Page Regions ARIA Landmarks - Use semantic <header> element
- <header> should have a role="banner"