Site header
The site header puts your site's name at the top of your website, under the utility header. This allows people to readily identify the site they're visiting. If they interact with the site's name, it returns them to the site's homepage.
The site name or branding must be in the header. It includes “State of California” to identify its association with the state. When selected, it returns people to the site's homepage. It must include at least one of these options:
- Site name: This is usually the department or agency name.
- Logo: An image of the department or agency logo.
A search box displays on the right side of the header and allows visitors to search the site. While this appears in the header, it is a separate structural element and is optional. Review Search for more information.
Sample
Desktop
Mobile
Usage
When and how to use it
The site header goes on all pages of your website.
If you use a logo in your site header, make sure that any text in it is legible. You may need to create a web optimized version of your logo for legibility. We recommend separating the visual elements of the logo from the text and adding the text next to the logo.
How not to use it
Do not modify the site header beyond adding the site name and a logo.
Do not use a logo with small, illegible text. Avoid using logos or state seals that are not optimized for web display.
Accessibility
Standard accessibility review
Each time a new component version is published:
- Test with the axe accessibility tool
- Review with the VoiceOver or NVDA screen reader
- Ensure all actionable elements are accessible by keyboard command and tab in a logical order
- Check the component layout on a variety of screen sizes