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.
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
When not to use this component
If your website is not being hosted on lib.umich.edu
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.
If you found a mistake on this page, would you kindly submit a fix?
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
UNIVERSITY OF MICHIGAN LIBRARY
913 S. University Avenue
Ann Arbor, MI 48109