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.

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

Without Links

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

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

With Links

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.

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

With Column Links

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.

<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

When to use this component

• Use on every agency site and application. The Global Footer is a required page element that provides consistent agency branding and secondary navigation.
• Use to surface essential links such as contact information, privacy policies, accessibility statements, and related program pages.
• Use with slotted <ul> content for single-list links, or nested <ul> with <span> headings for multi-column layouts.

When to consider something else

• Don’t use the Global Footer for primary navigation. Primary navigation belongs in <nys-globalheader>.
• Don’t use the Global Footer for page-specific content or calls to action. Footer content should be relevant site-wide.
• If you need statewide universal links (Agencies, Services, Counties), those belong in <nys-unavfooter>, which renders below this component.

Properties

Style Overrides

Events

This component does not emit any custom events.