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.

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>

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.

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

Style Overrides

The nys-unavheader does not have any css variables because this component must remain consistent across applications and sites.

Events