Universal Header

The Universal Header is a consistent branding element that shows users they are on a U-M Library website. It also provides a quick and organized way to access other library sites via the “Explore menu.”

When to use the Universal Header

Any website within the U-M Library’s web presence may add the Universal Header. A site does not have to be included in the Explore menu in order to display the header.

Sites with the Universal Header can also take advantage of our web presence alerts system to easily deploy banners for outages and other communication needs. Contact us if you’d like to be able to post alerts.

Design approach and placement

Since the Universal Header needs to work well with a variety of interfaces, the design is distinct, but minimal, and intended not to draw attention away from the respective website’s header and navigation. 

The Universal Header should be placed at the very top of the page, above the website header.

Inclusion in Explore menu

The “Explore menu” lists our top level sites and services, with some flexibility in that determination. Items included and the order they are presented in are selected by the Web Content Coordinator Group. The group considers use and value of sites to a broad audience, as well as core communication channels for outreach.

Relevant WCAG guidelines

• 2.1 Keyboard
• 4.1.2 Name, Role, Value

Code Example

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