Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    Components

    Header

    The header is a fundamental navigational component with a consistent display at the top of each page.

    Overview

    A header helps users identify where they are and provides a quick, organized way to reach the main sections of a website.

    Most websites require header navigation to help users find the information they need. 

    Formatting

    Anatomy

    Enterprise header

    The enterprise header is a collection of three components: the official banner, the navigation bar, and the navigation menu.

    View of the enterprise header with markers numbering 1-3
    1. Official website banner: This banner to identifies your site as an official Pennsylvania government site.
    2. Navigation bar: Includes the Commonwealth of Pennsylvania logo and a right panel containing a language selection button and search.
    3. Navigation menu: Series of navigation labels that inform the user what type of content they will find in the menu or link.

     

    Official website banner

    Banners identify official websites of government organizations in Commonwealth of Pennsylvania. They also help assure visitors that a website is official and secure.

    View of the official banner with markers numbering 1-3
    1. Pennsylvania flag
    2. Banner header: Displays message from the Commonwealth of Pennsylvania.
    3. Banner action: Displays modal explaining how to identify an official Commonwealth of Pennsylvania government website.

     

    Navigation bar

    View of the navigation bar with markers numbering 1-3
    1. Commonwealth of Pennsylvania logo: Links to the PA.gov homepage and is a required piece of the header. The logo should not be altered.
    2. Language selector: Allow users to select their preferred language when visiting a website in two languages.
    3. Search bar: Supports global search for PA.gov.

    Navigation menu

    View of the navigation menu with markers numbering 1 & 2
    1. Navigation link: Links to a webpage.
    2. Navigation dropdown: Opens a dropdown menu for a navigation label.

    Behavior

    The header spans the full width of the viewport and is the top-most element in the browser window. Header elements are persistent throughout the online experience.

    • The header supports a maximum of 8 navigation labels.
    • The header supports search and language selection.

    The header is fully responsive and changes what is displayed based on the browser size. At the small and x-small breakpoints, a hamburger menu will appear to house all navigation labels.

    Mobile

    All navigation labels will collapse into a right panel hamburger menu on any browser size below 992px wide.

    View of the header on mobile and how it responds when it is interacted with.