Universal Header

The Universal Header shows users that they are on a U-M Library website and provides a quick and organized way for users to access other library websites.

Preview

University of Michigan LibraryU-M Library

<m-universal-header></m-universal-header>

When to use this component

You must use the Universal Header at the top of every page of your website if it hosted with the lib.umich.edu domain.

When not to use this component

If your website is not being hosted on lib.umich.edu.

Used by

Research

During Fall 2020 usability testing:

89% of participants noticed the Universal Header without being prompted.
The label "Explore" matched most expectations and all participants had a positive reaction to the content in the dropdown menu.
The header also helped participants recognize they were on a U-M Library website.

View the research plan (Google Doc)

View the research findings (Google Slides)

If you found a mistake on this page, would you kindly submit a fix?

Get started

You can start using the Web Components and design tokens immediately by adding this stylesheet and these script tags to the <head>:

<link href="https://cdn.jsdelivr.net/npm/@umich-lib/web@1.3.0/umich-lib.css" rel="stylesheet"/> <script type="module" src="https://cdn.jsdelivr.net/npm/@umich-lib/web@1.3.0/dist/umich-lib/umich-lib.esm.js"></script> <script nomodule src="https://cdn.jsdelivr.net/npm/@umich-lib/components@1.1.0/dist/umich-lib/umich-lib.js"></script>

Use this design system across any framework or no framework at all. We accomplish this by using standardized web platform APIs. We love HTML, CSS, and JavaScript.