Global Footer

The <nys-globalfooter> component renders an agency-branded footer section that sits above the <nys-unavfooter>. It displays your agency name and supports slotted content for navigation links, contact information, and other site-wide resources. The layout automatically adjusts between a single-section and multi-column format based on the content structure you provide.

Copy Code
<nys-globalfooter agencyName="Office of Information Technology Services">
</nys-globalfooter>

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


Accessibility

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

  • Renders a <footer> landmark element, which screen readers identify as a contentinfo region. This allows users to navigate directly to the footer using landmark shortcuts.

  • The agency name is rendered as an <h2> heading, providing a clear content hierarchy within the footer region.

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

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

  • When homepageLink is set, the agency name becomes a link, providing an additional path back to the agency homepage.

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


Options

Use the prop homepageLink to link your agencyName to your homepage.

Copy Code
<nys-globalfooter agencyName="Office of Information Technology Services" homepageLink="https://its.ny.gov"></nys-globalfooter>

For simpler footers or public-facing sites, the Global Footer can include a single list of navigation links. To add links, follow this format:

  1. Use an unordered list (<ul>) inside the <nys-globalfooter> slot.

  2. Each list item (<li>) should contain an anchor (<a href="">) linking to the desired URL.

Use the prop homepageLink to link your agencyName to your homepage.

Copy Code
<nys-globalfooter agencyName="Office of Information Technology Services" homepageLink="https://ny.gov">
  <ul>
    <li><a href="https://its.ny.gov">ITS Home</a></li>
    <li><a href="https://its.ny.gov/about">About ITS</a></li>
  </ul>
</nys-globalfooter>

For sites that need to organize multiple navigation sections, the Global Footer supports column-based links. To add column links, follow this format:

  1. Use an unordered list (<ul>) inside the <nys-globalfooter> slot.

  2. Group related links into columns by giving each column a parent list item (<li>) with a heading (<span>).

  3. Nest another unordered list (<ul>) inside each column to hold individual link items.

  4. Inside that nested <ul>, add <li> items, each containing an anchor tag (<a href="">) that points to the desired URL.

Use the prop homepageLink to link your agencyName to your homepage.

Copy Code
<nys-globalfooter agencyName="Office of Information Technology Services" homepageLink="https://ny.gov">
  <ul>
    <li>
      <span>About</span>
      <ul>
        <li><a href="https://its.ny.gov/about-us">About ITS</a></li>
        <li><a href="https://its.ny.gov/contact-us">Contact</a></li>
        <li><a href="https://its.ny.gov/policies">Policies</a></li>
      </ul>
    </li>
    <li>
      <span>Resources</span>
      <ul>
        <li><a href="https://its.ny.gov/resources">Developer Tools</a></li>
        <li><a href="https://its.ny.gov/accessibility">Accessibility</a></li>
        <li><a href="https://its.ny.gov/its-tech-podcast">Tech Podcast</a></li>
      </ul>
    </li>
  </ul>
</nys-globalfooter>

Usage

Do

  • Use on every agency site and application. The Global Footer is a required page element.
  • Use to surface essential site-wide links such as contact information, privacy policies, accessibility statements, and related program pages.
  • Set agencyName to your agency's full official name (e.g., "Office of Information Technology Services").
  • Set homepageLink to make the agency name a clickable link back to your site's homepage.
  • Keep footer link lists concise. Group related links under <span> headings when you have more than 5–6 links.
  • Use slotted <ul> content for single-list links, or nested <ul> with <span> headings for multi-column layouts.
  • Place <nys-globalfooter> above <nys-unavfooter> and below your page content and <nys-backtotop>.

Don't

  • Don't use for primary navigation. That belongs in <nys-globalheader>.
  • Don't include page-specific content or calls to action. Footer content should be relevant site-wide.
  • Don't use for statewide universal links (Agencies, Services, Counties). Those belong in <nys-unavfooter>, which renders below this component.
  • Don't embed <script>, <iframe>, <object>, or <img> elements in slotted content. These are sanitized and removed by the component for security.

Properties

Property Type Default
id String ""
agencyName String ""
homepageLink String (URL) ""

Style Overrides

There are no existing CSS variables for this component. 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: June 18, 2026