1. Home
2. Patterns
3. Header

Header

Use the header to identify Penn Libraries websites and provide main navigation.

Show users they're on a Penn Libraries website.

When to use

Use the header if your website includes library.upenn.edu in the domain.

When to consider something else

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.

How to use

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.

Default

<pennlibs-header></pennlibs-header>

Add a name

<pennlibs-header service-name="Website Name"></pennlibs-header>

Add navigation

<pennlibs-header service-name="Website Name">
  <a href="/section-a">Section A</a>
  <a href="/section-b">Section B</a>
</pennlibs-header>

Add a lede

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

Use dark theme

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

Attributes

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'

Slots

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)

Custom properties

Name	Description
--pl-viewport-margins-max-width	The maximum width of the header.
--pl-viewport-margins-gutter	The gutter width of the header content.