Use the header to identify Penn Libraries websites and provide main navigation.
Use the header if your website includes library.upenn.edu in the domain.
Skip the header if your website is not part of Penn Libraries or if using it would be misleading. Some of our resources may appear on other websites without being part of our digital spaces.
Show the header on every page. Missing headers can confuse users.
List important website sections as links in the navigation. Use short, clear link labels. Avoid jargon or unfamiliar terms.
Present links in priority order. Put high-demand links on the left and low-demand links on the right.
Avoid org-structure navigation. Structure navigation around user tasks and information needs, not your internal organization.
Research your navigation. Test with users to build your information architecture and navigation structure. Keep testing to ensure updates meet user needs.
<pennlibs-header></pennlibs-header>
<pennlibs-header service-name="Website Name"></pennlibs-header>
<pennlibs-header service-name="Website Name">
<a href="/section-a">Section A</a>
<a href="/section-b">Section B</a>
</pennlibs-header>
<pennlibs-header service-name="Website Name" service-lede="briefly introduce what you do here">
<a href="/section-a">Section A</a>
<a href="/section-b">Section B</a>
</pennlibs-header>
<div style="background: var(--pl-color-penn-blue);">
<pennlibs-header service-name="Website Name" theme="dark">
<a href="/section-a">Section A</a>
<a href="/section-b">Section B</a>
</pennlibs-header>
</div>
Place a service switcher in the service-switcher slot to help people move between Penn Libraries' main places to start.
<pennlibs-header service-name="Website Name">
<pennlibs-service-switcher slot="service-switcher"></pennlibs-service-switcher>
<a href="/section-a">Section A</a>
<a href="/section-b">Section B</a>
</pennlibs-header>
| Attribute | Description | Type | Default |
|---|---|---|---|
service-href | The URL where the service name links to, typically the service homepage or main landing page. | string | "/" |
service-lede | A brief, compelling description that helps users understand what they can do here. Keep it short and focused on user benefits. | string | |
service-name | The service name should clearly describe what users want to accomplish. Avoid technical jargon, technology names, and acronyms. | string | |
theme | The visual theme of the header. Light theme uses blue logo, dark theme uses white logo. | "dark" | "light" | 'light' |
| Slot | Description |
|---|---|
end | Content to display at the end of the header (right side) |
name-end | Content to display at the end of the service name (right side) |
service-switcher | A pennlibs-service-switcher placed between the logo and the service name |
| Name | Description |
|---|---|
--pl-viewport-margins-max-width | The maximum width of the header. |
--pl-viewport-margins-gutter | The gutter width of the header content. |