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.
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.
Don't use the switcher to navigate within a single application. Use the header's navigation links for movement inside a site.
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.
<div style="min-height: 32rem;">
<pennlibs-header service-name="Find">
<pennlibs-service-switcher slot="service-switcher"></pennlibs-service-switcher>
</pennlibs-header>
</div>
<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>
| 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' |
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.