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