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.

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

Can’t use NYSDS web components in your project? Try using the CSS Variables instead.


Options

With Links

For public-facing sites, the Global Header can include navigation links. To add links, follow this format:

  1. Use an unordered list (<ul>) inside the <nys-globalheader> slot.
  2. Each list item (<li>) should contain an anchor (<a href="">) linking to the desired URL.

Use the prop homepageLink to link your agencyName to your homepage.

Note: Applications using the Global Header typically do not include links in the application or agency name to reduce distractions. Public-facing sites may include them, especially in mobile or collapsed menus, to aid navigation.

Copy 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

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

Just Application Name

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

Usage

When to use this component

  • <nys-globalheader> should be used at the top of all agency related sites and applications.
  • If a <nys-unavheader> (Universal Header) is present, <nys-globalheader> should appear below it.

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)

CSS Variables


Events

Suggest a New Component

Do you have an idea for a new NYSDS web component? Look through the existing proposals in our GitHub discussions board to see if someone already proposed something similar. If not, feel free to submit one.

Edit this page on GitHub (Permissions required)

Last updated: August 22, 2025