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.

<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:

Use an unordered list (<ul>) inside the <nys-globalheader> slot.
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.

<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

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

Just Application Name

<nys-globalheader 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)

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.