Skip to main content
Design System
In Review

Footer

The GOV.IE footer provides copyright, licensing and other information about your service.

Variants

Default

<footer class="gi-footer">
  <div class="gi-layout-container">
    <div class="footer-secondary-nav-links">
      <div>
        <div class="gi-heading-md">Heading</div>
        <hr class="gi-section-break-md"/>
        <ul>
          <li>
            <a href="#">Link 1</a>
          </li>
          <li>
            <a href="#">Link 2</a>
          </li>
          <li>
            <a href="#">Link 3</a>
          </li>
        </ul>
      </div>
      <div>
        <div class="gi-heading-md">Heading 2</div>
        <hr class="gi-section-break-md"/>
        <ul>
          <li>
            <a href="#">Link 4</a>
          </li>
          <li>
            <a href="#">Link 5</a>
          </li>
          <li>
            <a href="#">Link 6</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="footer-primary-nav-links">
      <ul>
        <li data-testid="main-link-0">
          <a href="#">Link 1</a>
        </li>
        <li data-testid="main-link-1">
          <a href="#">Link 2</a>
        </li>
        <li data-testid="main-link-2">
          <a href="#">Link 3</a>
        </li>
      </ul>
      <div class="logo-container">
        <img src="/logo.svg" />
      </div>
    </div>
  </div>
</footer>

{{ govieFooter({
    secondaryNavLinks: [
        {
          heading: 'Heading',
          links: [
            {
              href: '#',
              label: 'Link 1',
            },
            {
              href: '#',
              label: 'Link 2',
            },
            {
              href: '#',
              label: 'Link 3',
            },
          ],
        },
        {
          heading: 'Heading 2',
          links: [
            {
              href: '#',
              label: 'Link 4',
            },
            {
              href: '#',
              label: 'Link 5',
            },
            {
              href: '#',
              label: 'Link 6',
            },
          ],
        },
    ],
    links: [
      {
          label: 'Help',
          href: '/help/',
      },
      {
          label: 'Privacy Policy',
          href: '/privacy-policy/',
      },
      {
          label: 'Cookies Policy',
          href: '/cookies-policy/',
      },
      {
          label: 'Contact',
          href: '/contact/',
      },
    ]
  })
}}

import { Footer } from '@govie-ds/react';

<Footer
  secondaryNavLinks={[
    {
      heading: 'Heading',
      links: [
        {
          href: '#',
          label: 'Link 1',
        },
        {
          href: '#',
          label: 'Link 2',
        },
        {
          href: '#',
          label: 'Link 3',
        },
      ],
    },
    {
      heading: 'Heading 2',
      links: [
        {
          href: '#',
          label: 'Link 4',
        },
        {
          href: '#',
          label: 'Link 5',
        },
        {
          href: '#',
          label: 'Link 6',
        },
      ],
    },
  ]}
  links={[
    {
      label: 'Help',
      href: '/help/',
    },
    {
      label: 'Privacy Policy',
      href: '/privacy-policy/',
    },
    {
      label: 'Cookies Policy',
      href: '/cookies-policy/',
    },
    {
      label: 'Contact',
      href: '/contact/',
    },
  ]}
/>

Usage

Use the footer at the bottom of every page of your service.

You can add links to:

Use ‘Privacy’, ‘Accessibility’, ‘Cookies’ and ‘Terms and conditions’ for the link text.

Adding secondary navigation

Only add secondary GOV.IE navigation if you’re creating a GOV.IE service, and you want users to be able to navigate away from the service to somewhere else on the GOV.IE website. For example, you probably don’t want to encourage a user to navigate away from a linear, form-type service.

Best Practices

When to use this component

When not to use this component

Status

Figma Library
Considering
Local HTML
Stable
Global HTML
Beta
Global React
Beta