The global header provides users with a consistent brand and navigatoin for the site. Typical content included in the header is a skip to main content link, a logo, main navigation, and a search function.
When to use this component
There should be a header at the top of every page on a website.
When not to use this component
- The header should use the University’s Vibrant Blue (Hex #035CB8) unless a product or service does not allow for this branding.
- The header should always use the white knockout logo included in the Brand Guideunless the header color can’t be changed to the University’s Vibrant Blue and instead the header has a light background. In this case, you should use the color logo.
Accessibility and Usability
- Always include a Skip to main content link. See the Skip to main content link component for how to implement that function.
- Include proper landmarks (banner, search, navigation). When providing multiple types of navigation in your header, such as Main and Utility navigation, provide labels that match the function of each navigation landmark.
- The header logo should include the name of the site for its alt text (for example, UMass Office of the President).
- The main navigation should include no more than five main list items (with nested items included as needed).