Global Header

The <nys-globalheader> component is a reusable web component for use in New York State digital products. It helps provide users with consistent access to key features, branding, and primary navigation across all pages.

Example Code 
<nys-globalheader appName="User Registration Form" agencyName="Office of Information Technology Services">
</nys-globalheader>

Options

With Links

For public-facing content sites, the Global Header can include menu links. To add them, place an unordered list (<ul>) inside the nys-globalheader slot. Each list item (<li>) should contain an anchor (<a href="">) linking to the desired destination.

Use the prop homepageLink to link your agencyName to your homepage. If homepageLink is not provided, default fallback is window.location.origin otherwise (use disableHomepageLink to disable the homepage link).

Applications using the Global Header typically do not include links in the application or agency name to avoid distractions and keep users on task. However, public-facing sites may include links, often within a collapsed menu for better navigation.

Code 
<nys-globalheader homepageLink="https://ny.gov" agencyName="Office of Information Technology Services">
  <ul>
    <li><a href="https://its.ny.gov/services">Services</a></li>
    <li><a href="https://its.ny.gov/get-help">Help Center</a></li>
    <li><a href="https://its.ny.gov/cybersecurity">Cybersecurity</a></li>
    <li><a href="https://its.ny.gov/policies">Policies and Laws</a></li>
    <li><a href="https://its.ny.gov/procurement">Procurement</a></li>
    <li><a href="https://its.ny.gov/about-us">About Us</a></li>
  </ul>
</nys-globalheader>

Just Agency Name

Code 
<nys-globalheader disableHomepageLink agencyName="Office of Information Technology Services">
</nys-globalheader>

Just Application Name

Code 
<nys-globalheader disableHomepageLink appName="NYS Employee Portal">
</nys-globalheader>

Usage

When to use this component

  • nys-globalheader application header should be used at the top of all agency related sites and applications.

When to consider something else

  • If an application is not for a single agency, the Agency Name can be removed.

Do

  • Use agencyName as stand alone if public-facing site and not in the context of a specific application.
  • Use appName if this is an application

Don't

  • Don't use appName for an agency name.

Accessibility

The nys-globalheader component includes the following accessibility-focused features:

  • Proper use of <header> and <a> elements ensures compatibility with assistive technologies.
  • Keyboard navigation: Users can tab through all links in the header.

Properties

Property Type
agencyName string
appName string
homepageLink string (URL)
disableHomepageLink boolean

CSS Variables


Events