Service Switcher

Use the service switcher to move between Penn Libraries' main places to start.

Experimental: This pattern is still in progress, so do not use it in production yet. Read the design note for what we're exploring.

When to use

Use the service switcher to help people move between Penn Libraries' main places to start, such as Find, Digital Collections, and Philadelphia Area Archives.

Place it in the header, beside the logo, so people can find their way to another place from any page.

When to consider something else

Don't use the switcher to navigate within a single application. Use the header's navigation links for movement inside a site.

How to use

Compose it into the header through the service-switcher slot. The switcher sits between the logo and the service name.

Match the theme to the header. Pass theme="dark" when the switcher sits in a dark header so the icon stays legible.

Leave the list to the switcher. The set of services is built into the component, so every site presents the same places in the same order.

In the header

<div style="min-height: 32rem;">
  <pennlibs-header service-name="Find">
    <pennlibs-service-switcher slot="service-switcher"></pennlibs-service-switcher>
  </pennlibs-header>
</div>

In a dark header

<div style="background: var(--pl-color-penn-blue); min-height: 32rem;">
  <pennlibs-header service-name="Find" theme="dark">
    <pennlibs-service-switcher slot="service-switcher" theme="dark"></pennlibs-service-switcher>
  </pennlibs-header>
</div>

Attributes

Attribute	Description	Type	Default
theme	The visual theme, matching the surrounding header. dark keeps the icon light and uses a translucent chip; light uses the default solid chip.	"dark" | "light"	'light'

A familiar dot

The switcher's icon is a small grid of dots. That's the same dot we lean on elsewhere to separate levels and concepts, such as the middle dot (·) in the page title breadcrumb, and the dots that divide terms in a description list. Here the dots gather into a single mark for "go somewhere else," so the switcher feels of a piece with the rest of the system.

Where it's used

This pattern is not in use yet.