UNav Footer

The <nys-unavfooter> component renders the Universal Navigation Footer -- a standardized statewide footer that displays the NY.gov logo and links to Agencies, App Directory, Counties, Events, Programs, and Services. It is a required element on all New York State websites and applications, ensuring consistent statewide branding and navigation across every digital product.

Copy Code
<nys-unavfooter></nys-unavfooter>

Can't use NYS Design System web components in your project? Try using the CSS Variables instead.


Accessibility

The <nys-unavfooter> component includes the following accessibility-focused features:

  • Renders a <footer> landmark element, which screen readers identify as a contentinfo region. When both <nys-globalfooter> and <nys-unavfooter> are present, the page has two contentinfo landmarks, both discoverable by assistive technology.

  • The NY.gov logo link includes an aria-label of "logo of New York State" for screen readers.

  • All statewide navigation links use standard <a> elements, ensuring they are keyboard-focusable and announced correctly.

  • Keyboard navigation: users can Tab through all links in the footer in logical reading order.

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


Options

There are no configurable options for this component. It is intended to be used as-is to ensure consistency across all New York State digital products.

Usage

Do

  • Place the <nys-unavfooter> as the last element on every public-facing page, immediately after <nys-globalfooter>.
    • Use on every page of every NYS site and application. This component is required per NYS web policy, including on error pages, login screens, and landing pages.
    • Place as the very last element on the page, immediately after <nys-globalfooter>.
    • Use as-is with no configuration. The component handles its own content and styling.

Don't

  • Don't use on back office applications or internal sites that are not public-facing.
  • Place anywhere other than the absolute bottom of the page.
  • Customize, restyle, or override the component's content or appearance. Consistency across all state sites is the purpose of this component.

Properties

There are no properties for this component.


Style Overrides

These CSS custom properties are exposed for developers to customize the visual appearance of the component when necessary, beyond the defaults provided by the NYS Design System. Set them on the component selector to override the default styles.

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

CSS Variable Description
--nys-max-width--content Overrides the max width of the inner content area on .nys-grid-container and all header/footer/breadcrumb components at once. Set this at a higher level (e.g. :root) so it cascades down to every instance — setting it directly on one component only affects that instance. Takes priority over the size-specific variable below.
Can't find a property you need? Explore existing options, or propose a new one with a Component Proposal.


Events

This component does not emit any custom events.

Suggest a New Component

Do you have an idea for a new NYS Design System 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: October 15, 2026