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.

Note: The Universal Navigation Header remains consistent across all sites. It also carries the built-in statewide alert, which lets New York State deliver an urgent message to every NYS site at once.

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.

• Statewide alerts inherit the accessibility of <nys-alert>, and their links accept an aria-label from the feed when the visible label is not descriptive on its own.

  Additional accessibility test and build content is coming soon, in a new format.

Options

Search Off

<nys-unavheader hideSearch></nys-unavheader>

Custom Search Endpoint

The default search URL for the <nys-unavheader> is https://search.its.ny.gov/search/search.html?q=. The searchUrl property allows you to override the search endpoint with a custom url.

<nys-unavheader searchUrl="https://designsystem.ny.gov/search/?q=" hideTranslate></nys-unavheader>

Translate Off

<nys-unavheader hideTranslate></nys-unavheader>

Custom Language Endpoints

By default, the translate feature utilizes Smartling, which reroutes the page to the same URL with the language code prepended (e.g. https://www.ny.gov/ becomes https://es.ny.gov/). If your site does not use Smartling, you can override the default translate behavior to function with your translation service.

You also can override the default list of languages offered if your translation service does not support all of the default languages.

<nys-unavheader id="my-header"></nys-unavheader>
<script>
  const header = document.querySelector('#my-header');
  header.languages = [
  { code: 'en', label: 'English' },
  { code: 'es', label: 'Español' , url: '"https://ny.gov/?lang=es"'},
  { code: 'fr', label: 'Français', url: '"https://ny.gov/?lang=fr"'},
  ];
</script>

You also can override the default translate behavior to work with JavaScript rather than rerouting the URL. This allows you to implement a custom translation solution that does not require page reroutes.

<nys-unavheader id="my-header2" hideSearch></nys-unavheader>
<script>
  document.querySelector('#my-header2').addEventListener('nys-language-select', (event) => {
  event.preventDefault();
  const selectedLanguage = event.detail.language.label;
  alert(`Language changed to: ${selectedLanguage}`);
  });
</script>

Statewide Alerts

When New York State publishes an urgent message, such as a severe weather event or a public health emergency, the header renders it as a full-width banner directly below the header content. This is not configurable: on page load, the header reads the statewide alert feed at https://alerts-cta.static-assets.ny.gov/alerts.json and renders whatever is currently published. There is no property, slot, or script to add, and sites never author the content, so the same message reads identically everywhere it appears. If nothing is published or the feed cannot be reached, the header renders normally.

{
"alert": {
"status": "off",
"severity": "low",
"headline": "Winter Storm Warning",
"description": "Areas Affected: Bronx; Kings (Brooklyn); New York (Manhattan); Northeast Suffolk; Northern Nassau; Northern Queens; Northern Westchester; Northwest Suffolk; Orange; Putnam; Richmond (Staten Is.); Rockland; Southeast Suffolk; Southern Nassau; Southern Queens; Southern Westchester; Southwest Suffolk",
"linkAriaLabel": "Many areas are affected by the snow in the state. See more details via this link.",
"link": "https://governor.ny.gov/",
"linkTitle": "Learn More",
"icon": "Snowflake"
}
}

Usage

Properties

Style Overrides

nys-component {
  --nys-component-background-color: var(--nys-color-accent);
  --nys-component-color: var(--nys-color-ink);
}

Events

This component emits two custom Javascript events:

1. nys-language-select - Emitted when a user selects a language from the translate dropdown. The event detail contains the selected language object.

2. nys-search-submit - Emitted when a user submits a search query. The event detail contains the search query string.