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.
<nys-unavheader></nys-unavheader>
Can’t use NYSDS web components in your project? Try using the CSS Variables instead.
Options
Search Off
<nys-unavheader hideSearch></nys-unavheader>
Translate Off
<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.