Site header
The header lets users know which site they’re on and helps them navigate to the information they need. It usually contains things like a logo, navigation, and a search bar.
Site header example
A screenshot of the SDI header
How to use the site header
The header should always contain:
- The site logo
- The main navigation
It may also contain:
- A search bar
- A link to a key action, such as a contact page
Adding a site header in the CMS
If you’re building pages in the CMS, you don’t need to add in a header. This will be automatically applied to every page on the site.
You can edit some parts of the header in the CMS, under ‘site settings’. For example, you can change the navigation structure, add or remove the search bar, or change the link that appears above the header.
Accessibility
This area of the page is marked up as a header, so assistive technology can distinguish it from other content on the page. It is also accessible by keyboard.
We’ve also included a ‘skip to main content’ link to the header which is only accessible by keyboard or using assistive technology. This means these users don’t need to skip through the header content every time they land on a new page.
Evidence and research
In testing, users could clearly see which section of the site they were in and could easily see where they could navigate to.