Official website

of the Commonwealth of Pennsylvania

Components

Header

The header provides consistent navigation across every page of a web app or site. It helps the user identify where they are and navigate to other areas.

Overview

The header should appear throughout your web app or site.

The header contains the official website banner and a navigation bar.

The navigation bar includes:

  • An agency or program logo.
  • The program name.
  • A search bar.
  • A navigation menu, including drop-down submenus.  

Usage

When to use

The header is required on every page.

When not to use

The header is required on all pages. It should never be removed.

Accessibility

  • The header is responsive and changes what is displayed based on the browser size. At smaller screen sizes, the header uses a hamburger-style navigation menu.
  • All menu items must have clear, descriptive labels. 

Related components

We want to hear from you

This is the initial release of the Keystone Design System. If you're an early user, we want your bug reports, questions, and feedback.

 

Complete our form to share your thoughts—just log in with your PA.gov email. We'll review and consider every response.