Skip to main content Skip to list of components
Service phase: Beta

This is a new service – give us your feedback to help improve it.

Components

Footer

The footer component provides an area to use for copyright information and additional links to things like social media.

Contents

  1. Component status
  2. Content
Open this example in new tab

HTML 

<footer class="tna-footer" data-module="tna-footer">
  <div class="tna-footer__inner">
    <div class="tna-container">
      <div class="tna-column tna-column--flex-1" itemscope itemtype="https://schema.org/Organization">
        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" viewBox="0 0 160 160" width="96" height="96" aria-hidden="true" focusable="false">
          <path fill="transparent" d="M0 0h160v160H0z" class="tna-logo__background" />
          <g class="tna-logo__foreground" fill="currentColor">
            <path d="M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z" />
            <path d="M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z" />
          </g>
        </svg>
        <h2 class="tna-heading-m tna-footer__title" itemprop="name" translate="no">The National Archives</h2>
        <address class="tna-footer__address" translate="no" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
          <meta itemprop="streetAddress" content="Bessant Drive">
          <span itemprop="addressLocality">Kew</span>, <span itemprop="addressRegion">Richmond</span><br>
          <span itemprop="postalCode">TW9 4DU</span>
          <meta itemprop="addressCountry" content="GB">
        </address>
        <meta itemprop="foundingDate" content="2003-04">
        <div itemprop="parentOrganization" itemscope itemtype="https://schema.org/Organization">
          <meta itemprop="name" content="Department for Culture, Media and Sport">
          <meta itemprop="url" content="https://gov.uk/dcms">
        </div>
      </div>
    </div>
    <div class="tna-container">
      <div class="tna-column--full">
        <hr>
      </div>
    </div>
    <div class="tna-container tna-footer__licence">
      <div class="tna-column tna-column--full-tiny">
        <svg class="tna-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 483.2 195.7" width="60" height="24">
          <title>Open Government Licence</title>
          <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
        </svg>
      </div>
      <div class="tna-column tna-column--flex-1">
        <p>All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" class="tna-footer__link">Open Government Licence v3.0</a>, except where otherwise stated</p>
      </div>
      <div class="tna-column tna-column--full-small tna-column--full-tiny tna-footer__govuk">
        <a href="https://www.gov.uk/" class="tna-footer__govuk-link">
          <svg aria-hidden="true" class="tna-footer__govuk-logotype-crown" width="32" height="30" focusable="false" viewBox="0 0 32 30" xmlns="http://www.w3.org/2000/svg">
            <title translate="no">GOV.UK</title>
            <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8" fill="currentColor" fill-rule="evenodd" />
          </svg>
          GOV.UK
        </a>
      </div>
    </div>
  </div>
</footer>

Nunjucks

Nunjucks options
Primary options
Name Type Description
defaultContent boolean

If true, use the default content for the footer.
defaultContentBaseURL string

Set the base URL for the defaultContent links. Do not include a trailing slash.
meta string

An optional piece of text to display in the footer between the address and social media icons.
social object

An optional object of social media.

See macro options for social.
navigation array

An optional list of navigation sections to display in the main body of the footer.

See macro options for navigation.
legal array

A list of 'legal' links to display in the footer such as the cookie page, accessibility statement, privacy policy and terms and conditions.

See macro options for legal.
themeSelector boolean

Enable the theme selector (once settings cookies have been accepted).
currentTheme string

The current theme which has been selected. Options are system, light and dark.

Default value: light
classes string

Classes to add to the footer.
attributes object

HTML attributes (for example data attributes) to add to the footer.
Options for social
Name Type Description
items array

A list of social media items.

See macro options for items.
Options for items
Name Type Description
href string

Required.

The URL for the social media link.
icon string

Required.

An icon to use for the social media link. Options are twitter, youtube, facebook, flickr, instagram, rss and github.
title string

Required.

A title to use for the social media link.
shortTitle string

A shorter title to display next to the social media icon. If not specified, the full title will be used.
Options for navigation
Name Type Description
title string

Required.

The title of the navigation section.
hideTitle boolean

If true, hide the title of the navigation section.
items array

Required.

A list of items in the navigation section.

See macro options for items.
Options for items
Name Type Description
text string

Required.

The text to display for the navigation item.
href string

Required.

The URL of the navigation item.
title string

An optional title for the navigation item, used for accessibility.
newTab boolean

If true, open the link in a new tab.
Options for legal
Name Type Description
text string

Required.

The text of the legal link item.
href string

Required.

The URL of the legal link item.
title string

An optional title for the item, used for accessibility.

 
{% from "nationalarchives/components/footer/macro.njk" import tnaFooter %}

{{ tnaFooter({}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/footer/macro.html" import tnaFooter %}

{{ tnaFooter({}) }}

Component status

Phase
Official (ready to use in production)

Content

Use defaultContent: true to populate the footer with the required content for a service hosted on the main domain.

If using a different subdomain, change the base domain using defaultContentBaseURL.

Open this example in new tab

HTML 

<footer class="tna-footer" data-module="tna-footer">
  <div class="tna-footer__inner">
    <div class="tna-container">
      <div class="tna-column tna-column--flex-1" itemscope itemtype="https://schema.org/Organization">
        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" viewBox="0 0 160 160" width="96" height="96" aria-hidden="true" focusable="false">
          <path fill="transparent" d="M0 0h160v160H0z" class="tna-logo__background" />
          <g class="tna-logo__foreground" fill="currentColor">
            <path d="M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z" />
            <path d="M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z" />
          </g>
        </svg>
        <h2 class="tna-heading-m tna-footer__title" itemprop="name" translate="no">The National Archives</h2>
        <address class="tna-footer__address" translate="no" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
          <meta itemprop="streetAddress" content="Bessant Drive">
          <span itemprop="addressLocality">Kew</span>, <span itemprop="addressRegion">Richmond</span><br>
          <span itemprop="postalCode">TW9 4DU</span>
          <meta itemprop="addressCountry" content="GB">
        </address>
        <meta itemprop="foundingDate" content="2003-04">
        <div itemprop="parentOrganization" itemscope itemtype="https://schema.org/Organization">
          <meta itemprop="name" content="Department for Culture, Media and Sport">
          <meta itemprop="url" content="https://gov.uk/dcms">
        </div>
        <h3 class="tna-!--visually-hidden">
          Follow us on social media
        </h3>
        <nav class="tna-footer__social" aria-label="Social">
          <ul class="tna-ul tna-ul--plain tna-footer__social-items">
            <li class="tna-footer__social-item">
              <a href="https://twitter.com/UKNatArchives" class="tna-footer__social-item-link" aria-label="The National Archives X feed (formerly known as Twitter)" title="The National Archives X feed (formerly known as Twitter)" data-name="twitter">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="32" aria-hidden="true" focusable="false"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                  <path d="M453.2 112L523.8 112L369.6 288.2L551 528L409 528L297.7 382.6L170.5 528L99.8 528L264.7 339.5L90.8 112L236.4 112L336.9 244.9L453.2 112zM428.4 485.8L467.5 485.8L215.1 152L173.1 152L428.4 485.8z" />
                </svg>
                <span class="tna-footer__social-item-link-text">
                  X (formerly Twitter)
                </span>
              </a>
            </li>
            <li class="tna-footer__social-item">
              <a href="https://www.youtube.com/c/TheNationalArchivesUK" class="tna-footer__social-item-link" aria-label="The National Archives YouTube channel" title="The National Archives YouTube channel" data-name="youtube">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="32" aria-hidden="true" focusable="false"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                  <path d="M581.7 188.1C575.5 164.4 556.9 145.8 533.4 139.5C490.9 128 320.1 128 320.1 128C320.1 128 149.3 128 106.7 139.5C83.2 145.8 64.7 164.4 58.4 188.1C47 231 47 320.4 47 320.4C47 320.4 47 409.8 58.4 452.7C64.7 476.3 83.2 494.2 106.7 500.5C149.3 512 320.1 512 320.1 512C320.1 512 490.9 512 533.5 500.5C557 494.2 575.5 476.3 581.8 452.7C593.2 409.8 593.2 320.4 593.2 320.4C593.2 320.4 593.2 231 581.8 188.1zM264.2 401.6L264.2 239.2L406.9 320.4L264.2 401.6z" />
                </svg>
                <span class="tna-footer__social-item-link-text">
                  YouTube
                </span>
              </a>
            </li>
            <li class="tna-footer__social-item">
              <a href="https://www.facebook.com/TheNationalArchives" class="tna-footer__social-item-link" aria-label="The National Archives Facebook page" title="The National Archives Facebook page" data-name="facebook">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="32" aria-hidden="true" focusable="false"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                  <path d="M576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 440 146.7 540.8 258.2 568.5L258.2 398.2L205.4 398.2L205.4 320L258.2 320L258.2 286.3C258.2 199.2 297.6 158.8 383.2 158.8C399.4 158.8 427.4 162 438.9 165.2L438.9 236C432.9 235.4 422.4 235 409.3 235C367.3 235 351.1 250.9 351.1 292.2L351.1 320L434.7 320L420.3 398.2L351 398.2L351 574.1C477.8 558.8 576 450.9 576 320z" />
                </svg>
                <span class="tna-footer__social-item-link-text">
                  Facebook
                </span>
              </a>
            </li>
            <li class="tna-footer__social-item">
              <a href="https://www.flickr.com/photos/nationalarchives" class="tna-footer__social-item-link" aria-label="The National Archives Flickr feed" title="The National Archives Flickr feed" data-name="flickr">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="32" aria-hidden="true" focusable="false"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                  <path d="M496 96L144 96C117.5 96 96 117.5 96 144L96 496C96 522.5 117.5 544 144 544L496 544C522.5 544 544 522.5 544 496L544 144C544 117.5 522.5 96 496 96zM240.5 256C275.6 256 304 284.4 304 319.5C304 354.6 275.6 383 240.5 383C205.4 383 177 354.6 177 319.5C177 284.4 205.4 256 240.5 256zM399.5 256C434.6 256 463 284.4 463 319.5C463 354.6 434.6 383 399.5 383C364.4 383 336 354.6 336 319.5C336 284.4 364.4 256 399.5 256z" />
                </svg>
                <span class="tna-footer__social-item-link-text">
                  Flickr
                </span>
              </a>
            </li>
            <li class="tna-footer__social-item">
              <a href="https://www.instagram.com/nationalarchivesuk/" class="tna-footer__social-item-link" aria-label="The National Archives Instagram feed" title="The National Archives Instagram feed" data-name="instagram">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="32" aria-hidden="true" focusable="false"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                  <path d="M320.3 205C256.8 204.8 205.2 256.2 205 319.7C204.8 383.2 256.2 434.8 319.7 435C383.2 435.2 434.8 383.8 435 320.3C435.2 256.8 383.8 205.2 320.3 205zM319.7 245.4C360.9 245.2 394.4 278.5 394.6 319.7C394.8 360.9 361.5 394.4 320.3 394.6C279.1 394.8 245.6 361.5 245.4 320.3C245.2 279.1 278.5 245.6 319.7 245.4zM413.1 200.3C413.1 185.5 425.1 173.5 439.9 173.5C454.7 173.5 466.7 185.5 466.7 200.3C466.7 215.1 454.7 227.1 439.9 227.1C425.1 227.1 413.1 215.1 413.1 200.3zM542.8 227.5C541.1 191.6 532.9 159.8 506.6 133.6C480.4 107.4 448.6 99.2 412.7 97.4C375.7 95.3 264.8 95.3 227.8 97.4C192 99.1 160.2 107.3 133.9 133.5C107.6 159.7 99.5 191.5 97.7 227.4C95.6 264.4 95.6 375.3 97.7 412.3C99.4 448.2 107.6 480 133.9 506.2C160.2 532.4 191.9 540.6 227.8 542.4C264.8 544.5 375.7 544.5 412.7 542.4C448.6 540.7 480.4 532.5 506.6 506.2C532.8 480 541 448.2 542.8 412.3C544.9 375.3 544.9 264.5 542.8 227.5zM495 452C487.2 471.6 472.1 486.7 452.4 494.6C422.9 506.3 352.9 503.6 320.3 503.6C287.7 503.6 217.6 506.2 188.2 494.6C168.6 486.8 153.5 471.7 145.6 452C133.9 422.5 136.6 352.5 136.6 319.9C136.6 287.3 134 217.2 145.6 187.8C153.4 168.2 168.5 153.1 188.2 145.2C217.7 133.5 287.7 136.2 320.3 136.2C352.9 136.2 423 133.6 452.4 145.2C472 153 487.1 168.1 495 187.8C506.7 217.3 504 287.3 504 319.9C504 352.5 506.7 422.6 495 452z" />
                </svg>
                <span class="tna-footer__social-item-link-text">
                  Instagram
                </span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="tna-footer__navigation tna-column tna-column--flex-2 tna-column--full-medium tna-column--full-small tna-column--full-tiny tna-columns tna-columns--2 tna-columns--1-tiny">
        <nav class="tna-footer__navigation-block tna-columns__block" aria-label="Quick links">
          <h3 class="tna-footer__navigation-block-heading tna-heading-m">
            Quick links
          </h3>
          <ul class="tna-footer__navigation-block-items tna-ul tna-ul--plain">
            <li class="tna-footer__navigation-block-item">
              <a href="#/about/" class="tna-footer__navigation-block-item-link">
                About us
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="#/contact-us/" class="tna-footer__navigation-block-item-link">
                Contact us
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="#/about/news/" class="tna-footer__navigation-block-item-link">
                News
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="#/blogs/" class="tna-footer__navigation-block-item-link">
                Blogs
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://media.nationalarchives.gov.uk/index.php/category/podcasts-2/" class="tna-footer__navigation-block-item-link">
                Podcasts
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://images.nationalarchives.gov.uk/" class="tna-footer__navigation-block-item-link">
                Image library
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="#/about/press-room/" class="tna-footer__navigation-block-item-link">
                Press room
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="#/about/jobs/" class="tna-footer__navigation-block-item-link">
                Jobs
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="#/contact-us/british-citizenship-services/" class="tna-footer__navigation-block-item-link">
                British citizenship services
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="#/archives-sector/our-archives-sector-role/historical-manuscripts-commission/" class="tna-footer__navigation-block-item-link">
                Historical Manuscripts Commission
              </a>
            </li>
          </ul>
        </nav>
        <nav class="tna-footer__navigation-block tna-columns__block" aria-label="Other websites">
          <h3 class="tna-footer__navigation-block-heading tna-heading-m">
            Other websites
          </h3>
          <ul class="tna-footer__navigation-block-items tna-ul tna-ul--plain">
            <li class="tna-footer__navigation-block-item">
              <a href="#/webarchive/" class="tna-footer__navigation-block-item-link">
                UK Government Web Archive
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://www.legislation.gov.uk/" class="tna-footer__navigation-block-item-link">
                Legislation.gov.uk
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://caselaw.nationalarchives.gov.uk/" class="tna-footer__navigation-block-item-link">
                Find Case Law
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://www.thegazette.co.uk/" class="tna-footer__navigation-block-item-link" rel="noreferrer nofollow noopener">
                The Gazette
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://www.nationalarchivestrust.org.uk/" class="tna-footer__navigation-block-item-link" rel="noreferrer nofollow noopener">
                The National Archives Trust
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://ftna.org.uk/" class="tna-footer__navigation-block-item-link" rel="noreferrer nofollow noopener">
                Friends of The National Archives
              </a>
            </li>
            <li class="tna-footer__navigation-block-item">
              <a href="https://design-system.nationalarchives.gov.uk/" class="tna-footer__navigation-block-item-link">
                The National Archives Design System
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="tna-column tna-column--flex-1">
        <div class="tna-footer__mailing-list">
          <h3 class="tna-footer__navigation-block-heading tna-heading-m">
            Sign up to our emails
          </h3>
          <p>
            Hear about our latest news, stories from the collection and priority booking for events.
          </p>
          <div class="tna-button-group">
            <a href="https://pages.enews.nationalarchives.gov.uk/pages/subscribe" class="tna-button" aria-label="Subscribe to the National Archives newsletter" rel="noreferrer nofollow noopener">
              Subscribe
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="tna-container">
      <h3 class="tna-!--visually-hidden">
        Legal information
      </h3>
      <nav class="tna-footer__legal tna-column tna-column--full" aria-label="Legal">
        <ul class="tna-footer__legal-items tna-ul tna-ul--plain">
          <li class="tna-footer__legal-item">
            <a href="#/help/web-accessibility/" class="tna-footer__legal-item-link">
              Accessibility statement
            </a>
          </li>
          <li class="tna-footer__legal-item">
            <a href="#/about/freedom-of-information/" class="tna-footer__legal-item-link">
              Freedom of information
            </a>
          </li>
          <li class="tna-footer__legal-item">
            <a href="#/legal/" class="tna-footer__legal-item-link">
              Terms and conditions
            </a>
          </li>
          <li class="tna-footer__legal-item">
            <a href="#/legal/privacy-policy/" class="tna-footer__legal-item-link">
              Privacy policy
            </a>
          </li>
          <li class="tna-footer__legal-item">
            <a href="#/cookies/" class="tna-footer__legal-item-link">
              Cookies
            </a>
          </li>
        </ul>
        <hr>
      </nav>
    </div>
    <div class="tna-container tna-footer__licence">
      <div class="tna-column tna-column--full-tiny">
        <svg class="tna-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 483.2 195.7" width="60" height="24">
          <title>Open Government Licence</title>
          <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
        </svg>
      </div>
      <div class="tna-column tna-column--flex-1">
        <p>All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" class="tna-footer__link">Open Government Licence v3.0</a>, except where otherwise stated</p>
      </div>
      <div class="tna-column tna-column--full-small tna-column--full-tiny tna-footer__govuk">
        <a href="https://www.gov.uk/" class="tna-footer__govuk-link">
          <svg aria-hidden="true" class="tna-footer__govuk-logotype-crown" width="32" height="30" focusable="false" viewBox="0 0 32 30" xmlns="http://www.w3.org/2000/svg">
            <title translate="no">GOV.UK</title>
            <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8" fill="currentColor" fill-rule="evenodd" />
          </svg>
          GOV.UK
        </a>
      </div>
    </div>
  </div>
</footer>

Nunjucks

Nunjucks options
Primary options
Name Type Description
defaultContent boolean

If true, use the default content for the footer.
defaultContentBaseURL string

Set the base URL for the defaultContent links. Do not include a trailing slash.
meta string

An optional piece of text to display in the footer between the address and social media icons.
social object

An optional object of social media.

See macro options for social.
navigation array

An optional list of navigation sections to display in the main body of the footer.

See macro options for navigation.
legal array

A list of 'legal' links to display in the footer such as the cookie page, accessibility statement, privacy policy and terms and conditions.

See macro options for legal.
themeSelector boolean

Enable the theme selector (once settings cookies have been accepted).
currentTheme string

The current theme which has been selected. Options are system, light and dark.

Default value: light
classes string

Classes to add to the footer.
attributes object

HTML attributes (for example data attributes) to add to the footer.
Options for social
Name Type Description
items array

A list of social media items.

See macro options for items.
Options for items
Name Type Description
href string

Required.

The URL for the social media link.
icon string

Required.

An icon to use for the social media link. Options are twitter, youtube, facebook, flickr, instagram, rss and github.
title string

Required.

A title to use for the social media link.
shortTitle string

A shorter title to display next to the social media icon. If not specified, the full title will be used.
Options for navigation
Name Type Description
title string

Required.

The title of the navigation section.
hideTitle boolean

If true, hide the title of the navigation section.
items array

Required.

A list of items in the navigation section.

See macro options for items.
Options for items
Name Type Description
text string

Required.

The text to display for the navigation item.
href string

Required.

The URL of the navigation item.
title string

An optional title for the navigation item, used for accessibility.
newTab boolean

If true, open the link in a new tab.
Options for legal
Name Type Description
text string

Required.

The text of the legal link item.
href string

Required.

The URL of the legal link item.
title string

An optional title for the item, used for accessibility.

 
{% from "nationalarchives/components/footer/macro.njk" import tnaFooter %}

{{ tnaFooter({
  defaultContent: true,
  defaultContentBaseURL: "#"
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/footer/macro.html" import tnaFooter %}

{{ tnaFooter({
  "defaultContent": true,
  "defaultContentBaseURL": "#"
}) }}

Back to top