Skip to main content

This is a new service - your feedback will help us to improve it.

Header and footer


About

What does it do?

  • The primary way of navigating the website
  • Standardised pattern

When to use it?

  • Every page must have a header and a footer



Header

Skip link

There is a hidden skip link for users with screen reader assistive technology. This allows users to quickly access the main content. All pages must include this.

Ensure there is a HTML element on the page with the ID of wmcads-main-content so the user can skip to this section.

Logo

This must always be the West Midlands Combined Authority logo.

Phase indicator

This component must be used if the service is not live, using the phase indicator guidance.

Navigation

The three top-level navigation items were decided by identifying our user’s top tasks using Gerry McGovern’s methodology. We overlaid a heatmap of the home page, where we found the same three areas were the most-used areas.

The top-level items open a structured megamenu to avoid cognitive overload. Users are familiar with this pattern from online shopping and transport operators.

We only use three top-level items as we prefer not to use hamburger menus on mobile. Users are required to make an extra click to reveal the navigation, therefore you cannot glance at navigation options.

Mobile apps

When designing an app, you should use a tab bar and avoid using hamburger items wherever possible. Limit the tabs to the most important tasks using user research.

Search

This functionality only shows for desktop and tablet users. When clicked, search expands and takes over the whole page.

Component example

HTML Markup

<!-- Skip to content link -->
<a href="#wmcads-main-content" title="Skip to main content" target="_self" class="wmcads-link wmcads-header__skip-link" >Skip to main content
  
</a>
<!-- Main header section -->
<header>
  <div class="wmcads-header wmcads-header--mega-menu">
    <div class="wmcads-container wmcads-grid wmcads-grid--align-center wmcads-grid--justify-between">
      <div class="wmcads-header__vertical-align wmcads-col-auto">
        <!-- Logo -->
        <a class="wmcads-header__logo-link" href="https://wmcadigital.github.io/wmca-design-system" title="West Midlands Network Design System">
          <img class="wmcads-header__logo" alt="West Midlands Network logo" src="https://wmcadigital.github.io/wmca-design-system/img/logo.svg" />
        </a>
      </div>
      <!-- Mega menu nav items-->
      <nav id="mega-menu" class="wmcads-mega-menu">
        <!-- Mobile toggle button -->
        <button class="wmcads-mega-menu__primary-menu-link wmcads-mega-menu__search wmcads-hide-desktop">
          <svg class="wmcads-mega-menu__search-icon" aria-hidden="true"><use xlink:href="#wmcads-general-icon-action-search" href="#wmcads-general-icon-action-search"></use></svg>
          <span class="sr-only">Open Search</span>
        </button>
        <button class="wmcads-mega-menu__mobile-toggle wmcads-hide-desktop" aria-expanded="false" aria-controls="mega-menu-primary-menu">
          <svg class="wmcads-mega-menu__hamburger-icon" aria-hidden="true"><use xlink:href="#wmcads-general-icon-hamburger" href="#wmcads-general-icon-hamburger"></use></svg>
          <svg class="wmcads-mega-menu__close-icon" aria-hidden="true"><use xlink:href="#wmcads-general-icon-cancel" href="#wmcads-general-icon-cancel"></use></svg>
          <span class="sr-only">Open/Close Navigation</span>
        </button>
        <!-- Container for mega menu - allows scrolling on mobile nav -->
        <div id="mega-menu-primary-menu" class="wmcads-mega-menu__scroll-controller">
          <!-- Start primary (level 1) navigation -->
          <ul class="wmcads-mega-menu__primary-menu">
            <li class="wmcads-mega-menu__primary-menu-item wmcads-mega-menu__primary-menu-item-search wmcads-hide-desktop">
              <form role="search" action="#" novalidate="novalidate">
              <label for="search" class="sr-only">Search: </label>
              <input class="wmcads-fe-input wmcads-m-xs" id="search" name="q" type="text" placeholder="Search WMCA" aria-label="Search" /> 
              <button class="wmcads-btn" aria-label="Right Align">
                <svg class="wmcads-mega-menu__link-search-icon" aria-hidden="true"><use href="#wmcads-general-icon-action-search"></use></svg>
                <span class="sr-only">Search</span>
              </button>
              </form>
            </li>
          <li class="wmcads-mega-menu__primary-menu-item">
            <!-- Show swift logo in nav if is swift & tickets link -->
            
            <!-- allow primary (level 1) item to link if specified -->
              
              <a href="https://wmcadigital.github.io/wmca-design-system/styles/" title="Styles page" target="_self" class="wmcads-mega-menu__primary-menu-link" >
                Styles
              </a>
              <!-- if not linked use a button -->
              <!-- arrow icon for mobile nav -->
              <button class="wmcads-mega-menu__link-arrow-icon-btn" data-label="Styles" aria-label="toggle Styles" aria-controls="mega-menu-container">
                <svg class="wmcads-mega-menu__link-arrow-icon" aria-hidden="true"><use href="#wmcads-general-icon-chevron-right"></use></svg>
                <span class="sr-only">Previous</span>
              </button>
              <!-- Start mega menu container -->
              <div id="mega-menu-container-1" class="wmcads-mega-menu__container">
                <div class="wmcads-container">
                  <!-- Start submenu (level 2) -->
                  <ul class="wmcads-mega-menu__sub-menu">
                    <li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/styles/colour-palettes/" class="wmcads-mega-menu__sub-menu-link">
                        Colour palettes</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/styles/typography/" class="wmcads-mega-menu__sub-menu-link">
                        Typography</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/styles/icons/" class="wmcads-mega-menu__sub-menu-link">
                        Icons</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/styles/utility-classes/" class="wmcads-mega-menu__sub-menu-link">
                        Utility classes</a>
                    </li>
                  </ul>
                  <!-- End submenu (level 2) -->
                </div>
              </div>
              <!-- End mega menu container -->
            </li><li class="wmcads-mega-menu__primary-menu-item">
            <!-- Show swift logo in nav if is swift & tickets link -->
            
            <!-- allow primary (level 1) item to link if specified -->
              
              <a href="https://wmcadigital.github.io/wmca-design-system/components/" title="Components page" target="_self" class="wmcads-mega-menu__primary-menu-link" >
                Components
              </a>
              <!-- if not linked use a button -->
              <!-- arrow icon for mobile nav -->
              <button class="wmcads-mega-menu__link-arrow-icon-btn" data-label="Components" aria-label="toggle Components" aria-controls="mega-menu-container">
                <svg class="wmcads-mega-menu__link-arrow-icon" aria-hidden="true"><use href="#wmcads-general-icon-chevron-right"></use></svg>
                <span class="sr-only">Previous</span>
              </button>
              <!-- Start mega menu container -->
              <div id="mega-menu-container-2" class="wmcads-mega-menu__container">
                <div class="wmcads-container">
                  <!-- Start submenu (level 2) -->
                  <ul class="wmcads-mega-menu__sub-menu">
                    <li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/breadcrumb/" class="wmcads-mega-menu__sub-menu-link">
                        Breadcrumb</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/buttons/" class="wmcads-mega-menu__sub-menu-link">
                        Buttons</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/content-tiles/" class="wmcads-mega-menu__sub-menu-link">
                        Content Tiles</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/file-download/" class="wmcads-mega-menu__sub-menu-link">
                        File download</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/form-elements/" class="wmcads-mega-menu__sub-menu-link">
                        Form elements</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/links/" class="wmcads-mega-menu__sub-menu-link">
                        Links</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/lists/" class="wmcads-mega-menu__sub-menu-link">
                        Lists</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/loader/" class="wmcads-mega-menu__sub-menu-link">
                        Loader</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/phase-indicator/" class="wmcads-mega-menu__sub-menu-link">
                        Phase indicator</a>
                    </li>
                  </ul>
                  <!-- End submenu (level 2) -->
                </div>
              </div>
              <!-- End mega menu container -->
            </li><li class="wmcads-mega-menu__primary-menu-item">
            <!-- Show swift logo in nav if is swift & tickets link -->
            
            <!-- allow primary (level 1) item to link if specified -->
              
              <a href="https://wmcadigital.github.io/wmca-design-system/patterns/" title="Patterns page" target="_self" class="wmcads-mega-menu__primary-menu-link" >
                Patterns
              </a>
              <!-- if not linked use a button -->
              <!-- arrow icon for mobile nav -->
              <button class="wmcads-mega-menu__link-arrow-icon-btn" data-label="Patterns" aria-label="toggle Patterns" aria-controls="mega-menu-container">
                <svg class="wmcads-mega-menu__link-arrow-icon" aria-hidden="true"><use href="#wmcads-general-icon-chevron-right"></use></svg>
                <span class="sr-only">Previous</span>
              </button>
              <!-- Start mega menu container -->
              <div id="mega-menu-container-3" class="wmcads-mega-menu__container">
                <div class="wmcads-container">
                  <!-- Start submenu (level 2) -->
                  <ul class="wmcads-mega-menu__sub-menu">
                    <li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/patterns/banner/" class="wmcads-mega-menu__sub-menu-link">
                        Banner</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/patterns/feedback-loop/" class="wmcads-mega-menu__sub-menu-link">
                        Feedback loop</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/patterns/header-and-footer/" class="wmcads-mega-menu__sub-menu-link">
                        Header and footer</a>
                    </li>
                  </ul>
                  <!-- End submenu (level 2) -->
                </div>
              </div>
              <!-- End mega menu container -->
            </li>
          </ul>
          <!-- End primary (level 1) navigation -->
        </div>
        <!-- End scrollable container -->
        <button class="wmcads-mega-menu__primary-menu-link wmcads-mega-menu__search wmcads-hide-mobile" onclick="openDialog('dialogSearch', this)">
          <svg class="wmcads-mega-menu__search-icon" aria-hidden="true"><use href="#wmcads-general-icon-action-search"></use></svg>
          <span class="sr-only">Open Search</span>
        </button>
      </nav>
    </div>
  </div>
    <!-- full screen search controls -->
    <div role="dialog" id="dialogSearch" aria-label="Search Dialog" aria-modal="true" class="hidden control search">
      <div class="control">
          <div class="search-input">
              <form action="/">
                  <div class="wmcads-grid">
                      <div class="wmcads-col-4-5">
                          <input name="searchBox" class="searchBox" placeholder="Search" type="text" aria-label="Search query" />
                      </div>
                      <div class="wmcads-col-1-5">
                          <button type="submit" aria-label="Search submit" class="wmcads-btn">Go</button>
                      </div>
                  </div>
              </form>
          </div>
          <button aria-label="Close search" id="closeSearch" onclick="closeDialog(this)" class="icon-close">
              <svg aria-hidden="true">
                  <use xlink:href="#wmcads-general-icon-cancel" href="#wmcads-general-icon-cancel"></use>
              </svg>
          </button>
      </div>
  </div>
  <div class="wmcads-container">
    <!-- Phase banner -->
    <div class="wmcads-grid wmcads-banner-container">
       <div class="wmcads-col-1">
          <div class="wmcads-banner-container__phase-wrapper">
             <a href="https://wmcadigital.github.io/wmca-design-system/" target="_self" class="wmcads-phase-indicator" title="Beta homepage of West Midlands Combined Authority Design System">
            Beta
          </a>
          </div>
          <p class="wmcads-banner-container__text">
             This is a new service - your
             <a href="https://github.com/wmcadigital/wmca-design-system/issues" title="WMCA Design System Github" target="_blank" class="wmcads-link" rel="noopener noreferrer">feedback
            
          </a>
             will help us to improve it.
          </p>
       </div>
    </div>

    <!-- Breadcrumbs -->
    <div class="wmcads-breadcrumb">
    <nav aria-label="Breadcrumb">
      <ol class="wmcads-breadcrumb__list">
        <li class="wmcads-breadcrumb__list-item">
          <a href="https://wmcadigital.github.io/wmca-design-system/" class="wmcads-breadcrumb__link">
            <svg>
              <use xlink:href="#wmcads-general-icon-home" href="#wmcads-general-icon-home"></use>
            </svg>
          </a>
        </li>
        <li class="wmcads-breadcrumb__list-item">
          <a href="https://wmcadigital.github.io/wmca-design-system/patterns/" class="wmcads-breadcrumb__link">
            Patterns
          </a>
        </li>
        <li class="wmcads-breadcrumb__list-item">
          <a href="https://wmcadigital.github.io/wmca-design-system/patterns/header-and-footer/" class="wmcads-breadcrumb__link wmcads-breadcrumb__link--current" aria-current="page">
            Header and footer
          </a>
        </li>
      </ol>
    </nav>
    </div>

  </div>
</header>

Mobile app variant of header

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 West Midlands Combined Authority header.

To use the mobile app variant:

  • Add the modifier class wmcads-header--mobile-app to the wmcads-header element
  • Copy the code for the back button section below and insert it into your existing header
  • Finally, add the script for the back button in your local javascript file

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

Component example

HTML Markup

<!-- Skip to content link -->
<a href="#wmcads-main-content" title="Skip to main content" target="_self" class="wmcads-link wmcads-header__skip-link" >Skip to main content
  
</a>
<!-- Main header section -->
<header>
  <div class="wmcads-header wmcads-header--mobile-app wmcads-header--mega-menu">
    <div class="wmcads-container wmcads-grid wmcads-grid--align-center wmcads-grid--justify-between">
      <div class="wmcads-header__vertical-align wmcads-col-auto">
        <!-- Logo -->
        <a class="wmcads-header__logo-link" href="https://wmcadigital.github.io/wmca-design-system" title="West Midlands Network Design System">
          <img class="wmcads-header__logo" alt="West Midlands Network logo" src="https://wmcadigital.github.io/wmca-design-system/img/logo.svg" />
        </a>
      </div>
      <!-- Mega menu nav items-->
      <nav id="" class="wmcads-mega-menu">
        <!-- Mobile toggle button -->
        <button class="wmcads-mega-menu__primary-menu-link wmcads-mega-menu__search wmcads-hide-desktop">
          <svg class="wmcads-mega-menu__search-icon" aria-hidden="true"><use xlink:href="#wmcads-general-icon-action-search" href="#wmcads-general-icon-action-search"></use></svg>
          <span class="sr-only">Open Search</span>
        </button>
        <button class="wmcads-mega-menu__mobile-toggle wmcads-hide-desktop" aria-expanded="false" aria-controls="-primary-menu">
          <svg class="wmcads-mega-menu__hamburger-icon" aria-hidden="true"><use xlink:href="#wmcads-general-icon-hamburger" href="#wmcads-general-icon-hamburger"></use></svg>
          <svg class="wmcads-mega-menu__close-icon" aria-hidden="true"><use xlink:href="#wmcads-general-icon-cancel" href="#wmcads-general-icon-cancel"></use></svg>
          <span class="sr-only">Open/Close Navigation</span>
        </button>
        <!-- Container for mega menu - allows scrolling on mobile nav -->
        <div id="-primary-menu" class="wmcads-mega-menu__scroll-controller">
          <!-- Start primary (level 1) navigation -->
          <ul class="wmcads-mega-menu__primary-menu">
            <li class="wmcads-mega-menu__primary-menu-item wmcads-mega-menu__primary-menu-item-search wmcads-hide-desktop">
              <form role="search" action="#" novalidate="novalidate">
              <label for="search" class="sr-only">Search: </label>
              <input class="wmcads-fe-input wmcads-m-xs" id="search" name="q" type="text" placeholder="Search WMCA" aria-label="Search" /> 
              <button class="wmcads-btn" aria-label="Right Align">
                <svg class="wmcads-mega-menu__link-search-icon" aria-hidden="true"><use href="#wmcads-general-icon-action-search"></use></svg>
                <span class="sr-only">Search</span>
              </button>
              </form>
            </li>
          <li class="wmcads-mega-menu__primary-menu-item">
            <!-- Show swift logo in nav if is swift & tickets link -->
            
            <!-- allow primary (level 1) item to link if specified -->
              <button target="_self" class="wmcads-mega-menu__primary-menu-link" >
                Styles
              </button>
              <!-- arrow icon for mobile nav -->
              <button class="wmcads-mega-menu__link-arrow-icon-btn" data-label="Styles" aria-label="toggle Styles" aria-controls="-container">
                <svg class="wmcads-mega-menu__link-arrow-icon" aria-hidden="true"><use href="#wmcads-general-icon-chevron-right"></use></svg>
                <span class="sr-only">Previous</span>
              </button>
              <!-- Start mega menu container -->
              <div id="-container-1" class="wmcads-mega-menu__container">
                <div class="wmcads-container">
                  <!-- Start submenu (level 2) -->
                  <ul class="wmcads-mega-menu__sub-menu">
                    <li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/styles/colour-palettes/" class="wmcads-mega-menu__sub-menu-link">
                        Colour palettes</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/styles/typography/" class="wmcads-mega-menu__sub-menu-link">
                        Typography</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/styles/icons/" class="wmcads-mega-menu__sub-menu-link">
                        Icons</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/styles/utility-classes/" class="wmcads-mega-menu__sub-menu-link">
                        Utility classes</a>
                    </li>
                  </ul>
                  <!-- End submenu (level 2) -->
                </div>
              </div>
              <!-- End mega menu container -->
            </li><li class="wmcads-mega-menu__primary-menu-item">
            <!-- Show swift logo in nav if is swift & tickets link -->
            
            <!-- allow primary (level 1) item to link if specified -->
              <button target="_self" class="wmcads-mega-menu__primary-menu-link" >
                Components
              </button>
              <!-- arrow icon for mobile nav -->
              <button class="wmcads-mega-menu__link-arrow-icon-btn" data-label="Components" aria-label="toggle Components" aria-controls="-container">
                <svg class="wmcads-mega-menu__link-arrow-icon" aria-hidden="true"><use href="#wmcads-general-icon-chevron-right"></use></svg>
                <span class="sr-only">Previous</span>
              </button>
              <!-- Start mega menu container -->
              <div id="-container-2" class="wmcads-mega-menu__container">
                <div class="wmcads-container">
                  <!-- Start submenu (level 2) -->
                  <ul class="wmcads-mega-menu__sub-menu">
                    <li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/breadcrumb/" class="wmcads-mega-menu__sub-menu-link">
                        Breadcrumb</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/buttons/" class="wmcads-mega-menu__sub-menu-link">
                        Buttons</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/content-tiles/" class="wmcads-mega-menu__sub-menu-link">
                        Content Tiles</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/file-download/" class="wmcads-mega-menu__sub-menu-link">
                        File download</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/form-elements/" class="wmcads-mega-menu__sub-menu-link">
                        Form elements</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/links/" class="wmcads-mega-menu__sub-menu-link">
                        Links</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/lists/" class="wmcads-mega-menu__sub-menu-link">
                        Lists</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/loader/" class="wmcads-mega-menu__sub-menu-link">
                        Loader</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/components/phase-indicator/" class="wmcads-mega-menu__sub-menu-link">
                        Phase indicator</a>
                    </li>
                  </ul>
                  <!-- End submenu (level 2) -->
                </div>
              </div>
              <!-- End mega menu container -->
            </li><li class="wmcads-mega-menu__primary-menu-item">
            <!-- Show swift logo in nav if is swift & tickets link -->
            
            <!-- allow primary (level 1) item to link if specified -->
              <button target="_self" class="wmcads-mega-menu__primary-menu-link" >
                Patterns
              </button>
              <!-- arrow icon for mobile nav -->
              <button class="wmcads-mega-menu__link-arrow-icon-btn" data-label="Patterns" aria-label="toggle Patterns" aria-controls="-container">
                <svg class="wmcads-mega-menu__link-arrow-icon" aria-hidden="true"><use href="#wmcads-general-icon-chevron-right"></use></svg>
                <span class="sr-only">Previous</span>
              </button>
              <!-- Start mega menu container -->
              <div id="-container-3" class="wmcads-mega-menu__container">
                <div class="wmcads-container">
                  <!-- Start submenu (level 2) -->
                  <ul class="wmcads-mega-menu__sub-menu">
                    <li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/patterns/banner/" class="wmcads-mega-menu__sub-menu-link">
                        Banner</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/patterns/feedback-loop/" class="wmcads-mega-menu__sub-menu-link">
                        Feedback loop</a>
                    </li><li class="wmcads-mega-menu__sub-menu-item">
                      <a href="https://wmcadigital.github.io/wmca-design-system/patterns/header-and-footer/" class="wmcads-mega-menu__sub-menu-link">
                        Header and footer</a>
                    </li>
                  </ul>
                  <!-- End submenu (level 2) -->
                </div>
              </div>
              <!-- End mega menu container -->
            </li>
          </ul>
          <!-- End primary (level 1) navigation -->
        </div>
        <!-- End scrollable container -->
        <button class="wmcads-mega-menu__primary-menu-link wmcads-mega-menu__search wmcads-hide-mobile" onclick="openDialog('dialogSearch', this)">
          <svg class="wmcads-mega-menu__search-icon" aria-hidden="true"><use href="#wmcads-general-icon-action-search"></use></svg>
          <span class="sr-only">Open Search</span>
        </button>
      </nav>
    </div>
  </div>
    <!-- full screen search controls -->
    <div role="dialog" id="dialogSearch" aria-label="Search Dialog" aria-modal="true" class="hidden control search">
      <div class="control">
          <div class="search-input">
              <form action="/">
                  <div class="wmcads-grid">
                      <div class="wmcads-col-4-5">
                          <input name="searchBox" class="searchBox" placeholder="Search" type="text" aria-label="Search query" />
                      </div>
                      <div class="wmcads-col-1-5">
                          <button type="submit" aria-label="Search submit" class="wmcads-btn">Go</button>
                      </div>
                  </div>
              </form>
          </div>
          <button aria-label="Close search" id="closeSearch" onclick="closeDialog(this)" class="icon-close">
              <svg aria-hidden="true">
                  <use xlink:href="#wmcads-general-icon-cancel" href="#wmcads-general-icon-cancel"></use>
              </svg>
          </button>
      </div>
  </div>
</header>



Footer

Email capture form

The data is place within the general marketing email contact database on Campaign Monitor.

Component example

HTML Markup

<footer class="wmcads-footer">
  <div class="wmcads-container wmcads-grid">
    <div class="wmcads-col-1 wmcads-col-md-1-2">
      Copyright West Midlands Combined Authority &copy; 2020
    </div>
    <div class="wmcads-col-1 wmcads-col-md-1-2">
      <a href="https://www.wmca.org.uk/policies" title="Privacy and cookies policy" target="_blank" rel="noopener noreferrer" class="wmcads-footer__link wmcads-link">Privacy &amp; Cookies Policy</a>
    </div>
  </div>
</footer>

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 West Midlands Combined Authority 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 wmcads-footer--mobile-app to the wmcads-footer element

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

Component example

HTML Markup

<footer class="wmcads-footer wmcads-footer--mobile-app">
  <div class="wmcads-container wmcads-grid">
    <div class="wmcads-col-1 wmcads-col-md-1-2">
      Copyright West Midlands Combined Authority &copy; 2020
    </div>
    <div class="wmcads-col-1 wmcads-col-md-1-2">
      <a href="https://www.wmca.org.uk/policies" title="Privacy and cookies policy" target="_blank" rel="noopener noreferrer" class="wmcads-footer__link wmcads-link">Privacy &amp; Cookies Policy</a>
    </div>
  </div>
</footer>