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.

Copy Code
<nys-unavheader></nys-unavheader>

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


Options

Search Off

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

Translate Off

Copy 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 (hideSearch) and translate (hideTranslate) on/off depending on your needs.

Don't

  • Don't place it anywhere other than the top of the page.
  • Don't modify the universal 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
hideSearch boolean
hideTranslate boolean

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