Website Header

The website header displays our logo and shows users what U-M Library website they are using.

When to use website header

Use this header as a starting point for any website within the domain of lib.umich.edu. You can edit navigation links as needed.

Some products (such as the primary library website) may require more customization. In this case, it might be better to create a local component instead of using the reusable design.

Contact us with any questions about creating and editing website headers.

Guidelines for website header

We use two different background colors for the website header: white and blue-400. White is the primary and preferred version of the website header. The blue-400 header is only used in special circumstances.

Use of the website header requires use of the skip link to allow users to skip the menu with keyboard navigation.

Relevant WCAG guidelines

• 1.1.1 Non-text Content
• 2.1 Keyboard
• 2.4.1 Bypass Blocks
• 2.4.3 Focus Order
• 2.4.4 Link (In Context)
• 2.4.7 Focus Visible
• 4.1.2 Name, Role, Value

Code Example

See example pen by U-M Library Design System (@umlibrary-designsystem) on CodePen.