UNav Header

The <nys-unavheader> is a reusable web component for use in New York State digital products. It helps provide users with a small NYS-branded header at the top of every page to ensure users they are on a secure NYS site.

The Universal Navigation Header remains consistent across all sites.

Example Code 
<nys-unavheader></nys-unavheader>

Options

Search toggle

Example Code 
<nys-unavheader hideSearch></nys-unavheader>

Translate toggle

Example Code 
<nys-unavheader hideTranslate></nys-unavheader>

Usage

When to use this component

  • Use nys-unavheader at the top of every page.

When to consider something else

  • Do not place the nys-unavheader anywhere other than the top of the page.

Do

  • Place it only at the top of the page as the final footer.
  • Toggle search and translate on/off depending on your needs

Don't

  • Don't place it anywhere other than the top of the page.
  • Don't modify the header

Accessibility

The nys-unavheader 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
hideTranslate boolean
hideSearch boolean

CSS Variables


Events