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

    Header is a fundamental navigational component for pa.gov. that displays consistently at the top of each page. It also includes search and profile services for pa.gov.

    Overview

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

    When to use

    Most websites require header navigation. Most websites require some form of navigation to help users find the information they need. While a horizontal navigation bar is just one option for navigation design, it is one of the most visible and familiar ways of helping users navigate a site.

    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 Banner – You should use the banner to identify 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 provide short descriptors to inform the user what type of content they will find in the menu or link.

     

    Official 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 page.
    2. Navigation Dropdown: opens dropdown menu for navigation label

    Behavior

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

    • Header supports a maximum of 8 nav labels.
    • Supports search and language selection.

    The header is fully responsive and changes what is displayed based on the browser size. At 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.