June 24, 2026
Exploring a service switcher
We're exploring a way to show visitors that Penn Libraries has many places to start, and to offer a consistent way to switch between them. This is experimental. We're still working through the design, so we don't recommend using it in production yet.
The close placement next to the service name is intentional so that it's more likely to read as change services rather than navigate within the current one. The icon sets it apart from existing navigation while being subtle and out of the way.
The aim is to bring these services closer together as one place. The service switcher pattern has the markup and our current thinking on when to use it, but expect it to change while we keep iterating.
<div style="min-height: 28rem;"> <!-- height for modal -->
<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>
</div>