Patterns

Footer

About

What does it do?

The primary way of navigating the website
Standardised pattern

When to use it?

Every page must have a footer

Full variant of footer

The full variant of the footer may include menus which become collapsible on smaller devices.

To enable the collapsible footer menus on smaller screens you can include the recommended javascript below:

HTML markup

<footer>
  <div class="wmnds-footer wmnds-footer--v2">
    <div class="wmnds-container wmnds-grid">
      <div class="wmnds-col-1 wmnds-col-lg-1-3 wmnds-footer__updates-col">
        <h3 class="wmnds-footer__heading">Stay up to date</h3>
        <p>Don’t miss out on vital information, subscribe today and be in the know at all times.</p>
        <a href="#" class="wmnds-btn wmnds-footer__btn wmnds-footer__btn--block">Sign up to updates</a>
      </div>
      <div class="wmnds-col-1 wmnds-col-lg-1-3">
        <h3 class="wmnds-footer__heading wmnds-collapse-heading" aria-controls="footer-menu-" aria-expanded="true">
          Resources &amp; support
          <svg class="wmnds-collapse-heading__indicator">
            <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
          </svg>
        </h3>
        <ul class="wmnds-footer__menu wmnds-collapse-panel" id="footer-menu-">
          <li><a class="wmnds-footer__link" href="#">Businesses</a></li>
          <li><a class="wmnds-footer__link" href="#">Education</a></li>
          <li><a class="wmnds-footer__link" href="#">Job centres</a></li>
          <li><a class="wmnds-footer__link" href="#">Young people</a></li>
        </ul>
      </div>
      <div class="wmnds-col-1 wmnds-col-lg-1-3">
        <h3 class="wmnds-footer__heading wmnds-collapse-heading" aria-controls="footer-menu-about-us" aria-expanded="true">
          About us
          <svg class="wmnds-collapse-heading__indicator">
            <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
          </svg>
        </h3>
        <ul class="wmnds-footer__menu wmnds-collapse-panel" id="footer-menu-about-us">
          <li><a class="wmnds-footer__link" href="#">About Transport for West Midlands</a></li>
          <li><a class="wmnds-footer__link" href="#">WMN Apps</a></li>
        </ul>
        <h3 class="wmnds-footer__heading">Social media</h3>
        <ul class="wmnds-footer__social-media">
          <li><a href="https://www.facebook.com/westmidlandsnetwork/" title="Facebook"><svg>
                <use xlink:href="#wmnds-social-facebook" href="#wmnds-social-facebook"></use>
              </svg></a></li>
          <li><a href="https://twitter.com/WMNetwork" title="Twitter"><svg>
                <use xlink:href="#wmnds-social-twitter" href="#wmnds-social-twitter"></use>
              </svg></a></li>
          <li><a href="https://www.instagram.com/wmnetwork/" title="Instagram"><svg>
                <use xlink:href="#wmnds-social-instagram" href="#wmnds-social-instagram"></use>
              </svg></a></li>
        </ul>
      </div>
    </div>
    <div class="wmnds-container">
      <div class="wmnds-footer__bottom wmnds-grid">
        <div class="wmnds-col-1 wmnds-col-md-1-2">
          <p class="wmnds-footer__copyright">&copy; West Midlands Combined Authority 2023</p>
        </div>
        <div class="wmnds-col-1 wmnds-col-md-1-2">
          <ul class="wmnds-footer__bottom-menu">
            <li><a class="wmnds-footer__link" href="">Accessibility</a></li>
            <li><a class="wmnds-footer__link" href="">Terms and Conditions</a></li>
            <li><a class="wmnds-footer__link" href="">Policies</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>

Recommended javascript (browser compatible)

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var footerJs = function footerJs() {
  var collapseMenus = document.querySelectorAll('.wmnds-collapse-heading');
  var eventListenersAdded = false;
  var handleMobileFooter = function handleMobileFooter() {
    var windowWidth = window.innerWidth;
    if (windowWidth < 768 && !eventListenersAdded) {
      eventListenersAdded = true; // Stop multiple event listeners being added as collapse functionality forces 'resize' call on window.

      collapseMenus.forEach(function(collapseToggle) {
        var toggleActive = false;
        var panel = document.getElementById(collapseToggle.getAttribute('aria-controls'));
        var handleToggle = function handleToggle() {
          if (toggleActive) {
            collapseToggle.setAttribute('aria-expanded', 'true');
            panel.style.maxHeight = "".concat(panel.scrollHeight, "px");
          } else {
            collapseToggle.setAttribute('aria-expanded', 'false');
            panel.style.maxHeight = null;
          }
        };
        handleToggle();
        collapseToggle.addEventListener('click', function() {
          toggleActive = !toggleActive;
          handleToggle();
        });
      });
    }
  };
  // init mobile nav function
  handleMobileFooter();
  window.addEventListener('resize', handleMobileFooter);
};
var _default = footerJs;
exports["default"] = _default;

Recommended javascript (ES6)

const footerJs = () => {
  const collapseMenus = document.querySelectorAll('.wmnds-collapse-heading');
  let eventListenersAdded = false;

  const handleMobileFooter = () => {
    const windowWidth = window.innerWidth;

    if (windowWidth < 768 && !eventListenersAdded) {
      eventListenersAdded = true; // Stop multiple event listeners being added as collapse functionality forces 'resize' call on window.

      collapseMenus.forEach(collapseToggle => {
        let toggleActive = false;
        const panel = document.getElementById(collapseToggle.getAttribute('aria-controls'));

        const handleToggle = () => {
          if (toggleActive) {
            collapseToggle.setAttribute('aria-expanded', 'true');
            panel.style.maxHeight = `${panel.scrollHeight}px`;
          } else {
            collapseToggle.setAttribute('aria-expanded', 'false');
            panel.style.maxHeight = null;
          }
        };

        handleToggle();

        collapseToggle.addEventListener('click', () => {
          toggleActive = !toggleActive;
          handleToggle();
        });
      });
    }
  };
  // init mobile nav function
  handleMobileFooter();
  window.addEventListener('resize', handleMobileFooter);
};

export default footerJs;

When developing a mobile app, if you are limited for space and need extra room then it is recommended to use the mobile app variant of the Transport for West Midlands footer.

The mobile app version of the footer ensures that it will not show on devices with a screen width less than 768px. This means the footer will only show on devices with a screen resolution bigger than 768px.

To use the mobile app variant:

Add the modifier class wmnds-footer--mobile-app to the wmnds-footer element

You will most likely want to use this with the mobile variants of the breadcrumb component and header pattern .