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

HTML

<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:

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 on GitHub?

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://unpkg.com/@umich-lib/css@v1/dist/umich-lib.css" rel="stylesheet"/>
<script type="module" src="https://unpkg.com/@umich-lib/components@v1/dist/umich-lib/umich-lib.esm.js"></script>
<script nomodule src="https://unpkg.com/@umich-lib/components@v1/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.