Utility header

The utility header puts a standard header at the very top of your site. Having a common header tells people that the website is an official product of the State of California, which increases user trust.

It includes:

  • The CA.gov logo, which links to https://www.ca.gov
  • The text “Official website of the State of California” (on desktop) or “State of California” (on mobile)
  • Optional utility header links



Utility header screenshot


Mobile utility header screenshot



When and how to use it

The utility header is a required webpage structure component. Place it at the top of the website, above the department branding (site header) and all other content.

If you want to include a translation widget in the utility header, reach out through our Contact page .

How not to use it

Do not add other elements to or change the utility header. Use it only as designed.

Do not combine the utility header with department name or logo, navigation, or information. These are in the site header .


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