Navigation

Different types of navigation

Source: _cr19-styleguide.scss, line 548

Main Nav

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

This is the Main Nav

The main nav relies on the smartmenus plugin which is added as a dependency to the pattern-lab. This plugin will need to be included to any environment in which the main nav component is used.

Markup: components/navigation/main-nav.twig
<header role="banner">
    <div class="header__inner-wrapper">
        <div class="block block-system block-system-branding-block" id="block-comicrelief-branding">
            <a class="site-logo" href="/" rel="home" tabindex="2" title="Home">
                <img alt="Home" src="/themes/custom/comicrelief/logo.svg">
            </a>
        </div>
        <div class="main-nav__wrapper">
            <div class="main-nav__icons main-nav__burger">
                <a aria-expanded="false" aria-haspopup="true" aria-label="Open and close Navigation Menu, 11 items listed" class="c-hamburger c-hamburger--htx main-nav-toggle" href="#" role="button">
                    <div class="c-hamburger__text">
                        <span class="visually-hidden">Open and close nav menu</span>
                    </div>
                    <span></span>
                </a>
            </div>
            <nav aria-labelledby="block-comicrelief-main-menu-menu" class="block block-menu navigation menu--main" id="block-comicrelief-main-menu" role="navigation">
                <h2 class="visually-hidden" id="block-comicrelief-main-menu-menu">Main navigation</h2>
                <ul class="menu sm main-nav__items menu--level-0" id="main-menu">
                    <li class="menu-item menu-item--expanded">
                        <a aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="node/986" href="/what-we-do">
                            <span class="menu-item__text">What Your Money Does</span>
                        </a>
                        <ul class="menu main-nav__items menu--level-1">
                            <li class="menu-item menu-item--duplicate">
                                <a href="/what-we-do">
                                    <span class="menu-item__text">What Your Money Does</span>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a data-drupal-link-system-path="node/126" href="/What-we-do/our-legacy">
                                    <span class="menu-item__text">Our legacy</span>
                                    </a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item--expanded">
                        <a aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="node/736" href="/funding">
                            <span class="menu-item__text">Funding</span>
                        </a>
                        <ul class="menu main-nav__items menu--level-1">
                            <li class="menu-item menu-item--duplicate">
                                <a href="/funding">
                                    <span class="menu-item__text">Funding</span>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="/funding/applying-for-grants">
                                    <span class="menu-item__text">Applying for funding</span>
                                    </a>
                            </li>
                            <li class="menu-item">
                                <a data-drupal-link-system-path="node/49" href="/funding/current-opportunities">
                                    <span class="menu-item__text">Current opportunites</span>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="/funding/managing-your-grant">
                                    <span class="menu-item__text">Managing your funding</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a data-drupal-link-system-path="node/1034" href="/schools">
                            <span class="menu-item__text">Schools</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="/fundraising/red-nose-day">
                            <span class="menu-item__text">Red Nose Day</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="block block-cr-meta-icons" id="block-comicrelief-metaiconsblock">
            <div class="meta-icons">
                <a class="btn btn--green donate" href="https://www.comicrelief.com/donate" target="_blank">
                   Donate
                </a>
                <a class="meta-icons__magnify has-tooltip" href="#" role="button" title="Search">
                    <svg class="icon" focusable="false" tabindex="-1">
                        <use xlink:href="#icon-magnify"></use>
                    </svg>
                </a>
                <a class="meta-icons__esu-toggle has-tooltip" href="#" role="button" title="Sign up for emails">
                    <svg class="icon" focusable="false" tabindex="-1">
                        <use xlink:href="#envelope"></use>
                    </svg>
                    <span>Sign up for emails</span>
                </a>
            </div>
        </div>
    </div>
</header>

Source: _cr19-styleguide.scss, line 554
Markup: components/navigation/feature-nav.twig
<div class="main-nav__wrapper main-nav--feature__wrapper">
  <!-- Featured items and hamburger button -->
  <div class="main-nav--feature__inner-wrapper">
    <ul class="main-nav--feature__featured-items">
      <li class="menu-item">
        <a href="/" data-drupal-link-system-path="<front>">Home</a>
      </li>
      <li class="menu-item">
        <a href="/fundraise" data-drupal-link-system-path="node/22" class="is-active">Fundraise (Landing)</a>
      </li>
      <li class="menu-item">
        <a href="/whats-going-on" data-drupal-link-system-path="node/17">What's going on</a>
      </li>
    </ul>
    <!-- Mobile: navigation toggle button -->
    <div class="main-nav__icons main-nav__burger">
      <a role="button" class="c-hamburger c-hamburger--htx main-nav-toggle" href="#" aria-expanded="false">
        <div class="c-hamburger__text">
          <span class="visually-hidden">Open and close navigation menu</span>
        </div>
        <span></span>
      </a>
    </div>
  </div>
  <!-- Main navigation menu -->
  <nav role="navigation" class="navigation menu--main">
    <h2 class="visually-hidden" id="main-nav__title"> Main navigation menu </h2>
    <ul id="main-menu" class="main-nav--feature__items menu sm main-nav__items">
      <li class="menu-item">
        <a href="/">Home</a>
      </li>
      <li class="menu-item">
        <a href="/">Fundraise</a>
      </li>
      <li class="menu-item">
        <a href="/link">What's going on</a>
      </li>
      <li class="menu-item">
        <a href="/">FAQ</a>
      </li>
      <li class="menu-item">
        <a href="/">Legal</a>
      </li>
    </ul>
  </nav>
</div>
Source: _cr19-styleguide.scss, line 565
Example
Markup: components/navigation/footer-nav.twig
<footer role="contentinfo">
  <div class="region region-footer cr-footer">
    <div class="footer--minimal footer-nav-outer-wrapper">
      <div class="footer-nav-inner-wrapper">
        <div class="footer__social-links">
          <ul>
            <li>
              <a href="https://www.facebook.com/comicrelief" title="Facebook" target="_blank" class="icon__fb">
                <svg class="icon">
                  <use xlink:href="#icon-facebook"></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="https://twitter.com/comicrelief" title="Twitter" target="_blank" class="icon__twitter">
                <svg class="icon">
                  <use xlink:href="#icon-twitter"></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw" title="Youtube" target="_blank" class="icon__youtube">
                <svg class="icon">
                  <use xlink:href="#icon-youtube"></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="https://www.instagram.com/comicrelief" title="Instagram" target="_blank" class="icon__instagram">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
                  <defs>
                    <radialGradient id="a" cx="14.53" cy="2.37" r="50.41" gradientTransform="matrix(1, 0, 0, -1, 0, 52.25)" gradientUnits="userSpaceOnUse">
                      <stop offset="0" stop-color="#ffd676"></stop>
                      <stop offset="0.25" stop-color="#f2a454"></stop>
                      <stop offset="0.38" stop-color="#f05c3c"></stop>
                      <stop offset="0.7" stop-color="#c22f86"></stop>
                      <stop offset="0.96" stop-color="#6666ad"></stop>
                      <stop offset="0.99" stop-color="#5c6cb2"></stop>
                    </radialGradient>
                  </defs>
                  <title>Rednoseday Instagram</title>
                  <desc>Visit Rednoseday instagram page</desc>
                  <circle cx="25" cy="25" r="25" fill="url(#a)"></circle>
                  <path d="M25,13.25c3.83,0,4.28,0,5.79.08a7.93,7.93,0,0,1,2.66.49,4.75,4.75,0,0,1,2.72,2.72,7.93,7.93,0,0,1,.49,2.66c.07,1.51.08,2,.08,5.79s0,4.28-.08,5.79a7.93,7.93,0,0,1-.49,2.66,4.75,4.75,0,0,1-2.72,2.72,7.93,7.93,0,0,1-2.66.49c-1.51.07-2,.08-5.79.08s-4.28,0-5.79-.08a7.93,7.93,0,0,1-2.66-.49,4.75,4.75,0,0,1-2.72-2.72,7.93,7.93,0,0,1-.49-2.66c-.07-1.51-.08-2-.08-5.79s0-4.28.08-5.79a7.93,7.93,0,0,1,.49-2.66,4.75,4.75,0,0,1,2.72-2.72,7.93,7.93,0,0,1,2.66-.49c1.51-.07,2-.08,5.79-.08m0-2.58c-3.89,0-4.38,0-5.91.09a10.52,10.52,0,0,0-3.48.67,7.33,7.33,0,0,0-4.19,4.19,10.52,10.52,0,0,0-.67,3.48c-.07,1.53-.09,2-.09,5.91s0,4.38.09,5.91a10.52,10.52,0,0,0,.67,3.48,7.33,7.33,0,0,0,4.19,4.19,10.52,10.52,0,0,0,3.48.67c1.53.07,2,.09,5.91.09s4.38,0,5.91-.09a10.52,10.52,0,0,0,3.48-.67,7.33,7.33,0,0,0,4.19-4.19,10.52,10.52,0,0,0,.67-3.48c.07-1.53.09-2,.09-5.91s0-4.38-.09-5.91a10.52,10.52,0,0,0-.67-3.48,7.33,7.33,0,0,0-4.19-4.19,10.52,10.52,0,0,0-3.48-.67C29.38,10.69,28.91,10.67,25,10.67Z" fill="#fff"></path>
                  <path d="M25,17.64A7.36,7.36,0,1,0,32.36,25,7.36,7.36,0,0,0,25,17.64Zm0,12.14A4.78,4.78,0,1,1,29.78,25h0A4.78,4.78,0,0,1,25,29.78Z" fill="#fff"></path>
                  <circle cx="32.65" cy="17.35" r="1.72" fill="#fff"></circle>
                </svg>
              </a>
            </li>
          </ul>
        </div>
        <nav role="navigation" aria-labelledby="block-comicrelief-footer-menu" id="block-comicrelief-footer" class="contextual-region block block-menu navigation menu--footer">
          <h2 class="visually-hidden" id="block-comicrelief-footer-menu">Minimal footer menu</h2>
          <div data-contextual-id="block:block=comicrelief_footer:langcode=en|menu:menu=footer:langcode=en" class="contextual" role="form">
            <button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open Minimal footer menu configuration options</button>
            <ul class="contextual-links" hidden="">
              <li class="block-configure"><a href="/admin/structure/block/manage/comicrelief_footer?destination=node/21">Configure block</a></li>
              <li class="entitymenuedit-form"><a href="/admin/structure/menu/manage/footer?destination=node/21">Edit menu</a></li>
            </ul>
          </div>
          <ul class="menu">
            <li class="menu-item">
              <a href="/contact-us" target="" data-drupal-link-system-path="node/39">Contact us</a>
            </li>
            <li class="menu-item">
              <a href="/working-with-us" data-drupal-link-system-path="node/8">Partners</a>
            </li>
            <li class="menu-item">
              <a href="/careers" data-drupal-link-system-path="node/40">Careers</a>
            </li>
            <li class="menu-item">
              <a href="/privacy-notice" data-drupal-link-system-path="node/615">Privacy</a>
            </li>
            <li class="menu-item">
              <a href="/cookies-policy" data-drupal-link-system-path="node/952">Cookies</a>
            </li>
            <li class="menu-item">
              <a href="/frequently-asked-questions" data-drupal-link-system-path="node/119">FAQs</a>
            </li>
            <li class="menu-item">
              <a href="/legal" target="" data-drupal-link-system-path="node/125">Legal</a>
            </li>
            <li class="menu-item">
              <a href="/press-releases" data-drupal-link-system-path="node/576">Press Area</a>
            </li>
            <li class="menu-item">
              <a href="/accessibility" data-drupal-link-system-path="node/122">Accessibility</a>
            </li>
            <li class="menu-item">
              <a href="/sitemap" data-drupal-link-system-path="node/418">Sitemap</a>
            </li>
            <li class="menu-item">
              <a href="/reporting-concerns-about-our-organisation-or-operations" data-drupal-link-system-path="node/799">Reporting concerns</a>
            </li>
            <li class="menu-item">
              <a href="/update-your-preferences" data-drupal-link-system-path="node/965">Update your preferences</a>
            </li>
            <li class="menu-item">
              <a href="/comic-reliefs-statement-on-modern-slavery-and-human-trafficking" data-drupal-link-system-path="node/856">Modern slavery and human trafficking</a>
            </li>
          </ul>
        </nav>
        <div class="footer__copyright">
          <p>Comic  Relief  is  the  trading  name  of  Charity  Projects,  a  registered  charity  in  England  and Wales  (326568)  and  Scotland  (SC039730),  which  is a company  limited  by  guarantee registered in England and Wales (01806414) with its registered address at Hanover House, 14 Hanover Square, London, W1S 1HP</p>
        </div>
        <div class="footer__branding">
          <a title="Comic Relief" href="http://www.comicrelief.com/" rel="home" target="_blank">
            <svg class="icon">
              <use xlink:href="#crlogo2018"></use>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</footer>
Source: _cr19-styleguide.scss, line 571
Example
Markup: components/navigation/expanded-footer.twig
<footer role="contentinfo">
  <div class="region region-footer cr-footer">
    <div class="footer--expanded footer-nav-outer-wrapper">
      <div class="footer-nav-inner-wrapper">
        <div class="footer__social-links">
          <ul>
            <li>
              <a href="https://www.facebook.com/comicrelief" title="Facebook" target="_blank" class="icon__fb">
                <svg class="icon">
                  <use xlink:href="#icon-facebook"></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="https://twitter.com/comicrelief" title="Twitter" target="_blank" class="icon__twitter">
                <svg class="icon">
                  <use xlink:href="#icon-twitter"></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw" title="Youtube" target="_blank" class="icon__youtube">
                <svg class="icon">
                  <use xlink:href="#icon-youtube"></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="https://www.instagram.com/comicrelief" title="Instagram" target="_blank" class="icon__instagram">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
                  <title>Rednoseday Instagram</title>
                  <desc>Visit Rednoseday instagram page</desc>
                  <circle cx="25" cy="25" r="25" fill="#E52630"></circle>
                  <path d="M25,13.25c3.83,0,4.28,0,5.79.08a7.93,7.93,0,0,1,2.66.49,4.75,4.75,0,0,1,2.72,2.72,7.93,7.93,0,0,1,.49,2.66c.07,1.51.08,2,.08,5.79s0,4.28-.08,5.79a7.93,7.93,0,0,1-.49,2.66,4.75,4.75,0,0,1-2.72,2.72,7.93,7.93,0,0,1-2.66.49c-1.51.07-2,.08-5.79.08s-4.28,0-5.79-.08a7.93,7.93,0,0,1-2.66-.49,4.75,4.75,0,0,1-2.72-2.72,7.93,7.93,0,0,1-.49-2.66c-.07-1.51-.08-2-.08-5.79s0-4.28.08-5.79a7.93,7.93,0,0,1,.49-2.66,4.75,4.75,0,0,1,2.72-2.72,7.93,7.93,0,0,1,2.66-.49c1.51-.07,2-.08,5.79-.08m0-2.58c-3.89,0-4.38,0-5.91.09a10.52,10.52,0,0,0-3.48.67,7.33,7.33,0,0,0-4.19,4.19,10.52,10.52,0,0,0-.67,3.48c-.07,1.53-.09,2-.09,5.91s0,4.38.09,5.91a10.52,10.52,0,0,0,.67,3.48,7.33,7.33,0,0,0,4.19,4.19,10.52,10.52,0,0,0,3.48.67c1.53.07,2,.09,5.91.09s4.38,0,5.91-.09a10.52,10.52,0,0,0,3.48-.67,7.33,7.33,0,0,0,4.19-4.19,10.52,10.52,0,0,0,.67-3.48c.07-1.53.09-2,.09-5.91s0-4.38-.09-5.91a10.52,10.52,0,0,0-.67-3.48,7.33,7.33,0,0,0-4.19-4.19,10.52,10.52,0,0,0-3.48-.67C29.38,10.69,28.91,10.67,25,10.67Z" fill="#fff"></path>
                  <path d="M25,17.64A7.36,7.36,0,1,0,32.36,25,7.36,7.36,0,0,0,25,17.64Zm0,12.14A4.78,4.78,0,1,1,29.78,25h0A4.78,4.78,0,0,1,25,29.78Z" fill="#fff"></path>
                  <circle cx="32.65" cy="17.35" r="1.72" fill="#fff"></circle>
                </svg>
              </a>
            </li>
          </ul>
        </div>
        <nav role="navigation" aria-labelledby="block-expandedfooter-menu" id="block-expandedfooter" class="contextual-region block block-menu navigation menu--expanded-footer crExpandedFooter-processed">
          <h2 class="visually-hidden" id="block-expandedfooter-menu">Expanded Footer</h2>
          <div data-contextual-id="block:block=expandedfooter:langcode=en|menu:menu=expanded-footer:langcode=en" class="contextual" role="form">
            <button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open Expanded Footer configuration options</button>
            <ul class="contextual-links" hidden="">
              <li class="block-configure"><a href="/admin/structure/block/manage/expandedfooter?destination=node/21">Configure block</a></li>
              <li class="entitymenuedit-form"><a href="/admin/structure/menu/manage/expanded-footer?destination=node/21">Edit menu</a></li>
            </ul>
          </div>
          <ul class="menu menu--level-0">
            <li class="menu-item menu-item--expanded menu-item--1 clearfix">
              <a href="/" title="A Second Menu" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Hear From Us</span></a>
              <ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix">
                <li class="menu-item menu-item--1 clearfix">
                  <a href="#" data-drupal-link-system-path="<front>" class="is-active">
                    <span class="menu-item__text">
                      Get the newsletter
                    </span>
                  </a>
                </li>
                <li class="menu-item menu-item--2 clearfix">
                  <a href="/" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">How we contact you</span></a>
                </li>
              </ul>
            </li>
            <li class="menu-item menu-item--expanded menu-item--2 clearfix">
              <a href="/" title="Get in touch" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Get in touch</span></a>
              <ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix menu--has-3-items">
                <li class="menu-item menu-item--1 clearfix">
                  <a href="/" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Contact us</span></a>
                </li>
                <li class="menu-item menu-item--2 clearfix">
                  <a href="/" title="Your Gift Aid" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Your Gift Aid</span></a>
                </li>
                <li class="menu-item menu-item--3 clearfix">
                  <a href="/" title="FAQs" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">FAQs</span></a>
                </li>
              </ul>
            </li>
            <li class="menu-item menu-item--expanded menu-item--3 clearfix">
              <a href="/" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">About us</span></a>
              <ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix menu--has-3-items menu--has-6-items">
                <div class="menu--expanded-footer__left">
                  <li class="menu-item menu-item--1 clearfix">
                    <a href="/newsletter" title="Get the newsletter"><span class="menu-item__text">Get the newsletter</span></a>
                  </li>
                  <li class="menu-item menu-item--2 clearfix">
                    <a href="/how-we-contact-you" title="Choose how we contact you"><span class="menu-item__text">Choose how we contact you</span></a>
                  </li>
                  <li class="menu-item menu-item--3 clearfix">
                    <a href="/another-link" title="Another link"><span class="menu-item__text">Another link</span></a>
                  </li>
                </div>
                <div class="menu--expanded-footer__right">
                  <li class="menu-item menu-item--4 clearfix">
                    <a href="/yet-another-link" title="Yet Another Link"><span class="menu-item__text">Yet Another Link</span></a>
                  </li>
                  <li class="menu-item menu-item--5 clearfix">
                    <a href="/a-fifth-link" title="A Fifth Link"><span class="menu-item__text">A Fifth Link</span></a>
                  </li>
                  <li class="menu-item menu-item--6 clearfix">
                    <a href="/sixth-link"><span class="menu-item__text">A Final Sixth Link</span></a>
                  </li>
                </div>
              </ul>
            </li>
            <li class="menu-item menu-item--expanded menu-item--4 clearfix">
              <a href="/" title="Careers" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Careers</span></a>
              <ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix menu--has-3-items menu--has-6-items">
                <li class="menu-item menu-item--1 clearfix">
                  <a href="/" title="Open roles" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Open roles</span></a>
                </li>
                <li class="menu-item menu-item--2 clearfix">
                  <a href="/" title="Working at Comic Relief" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Working at Comic Relief</span></a>
                </li>
              </ul>
            </li>
            <li class="menu-item menu-item--expanded menu-item--5 clearfix">
              <a href="/" title="News" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">News</span></a>
              <ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix menu--has-3-items menu--has-6-items">
                <li class="menu-item menu-item--1 clearfix">
                  <a href="/news" title="News" data-drupal-link-system-path="node/427"><span class="menu-item__text">News</span></a>
                </li>
                <li class="menu-item menu-item--2 clearfix">
                  <a href="/" title="News" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Press Area</span></a>
                </li>
              </ul>
            </li>
            <li class="menu-item menu-item--expanded menu-item--6 clearfix">
              <a href="/" title="Legal" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Legal</span></a>
              <ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix menu--has-3-items menu--has-6-items menu--has-4-items">
                <div class="menu--expanded-footer__left">
                  <li class="menu-item menu-item--1 clearfix">
                    <a href="/some-link" title="Fourth Menu link"><span class="menu-item__text">Fourth Menu link</span></a>
                  </li>
                  <li class="menu-item menu-item--2 clearfix">
                    <a href="/liiiiink" title="liiiiink"><span class="menu-item__text">liiiiink</span></a>
                  </li>
                </div>
                <div class="menu--expanded-footer__right">
                  <li class="menu-item menu-item--3 clearfix">
                    <a href="/liiiiink2" title="liiiiink2"><span class="menu-item__text">liiiiink2</span></a>
                  </li>
                  <li class="menu-item menu-item--4 clearfix">
                    <a href="/liiiiink4" title="liiiiink4"><span class="menu-item__text">liiiiink4</span></a>
                  </li>
                </div>
              </ul>
            </li>
          </ul>
        </nav>
        <span class="md-breakpoint"></span>
        <div class="footer__branding">
          <a title="Comic Relief" href="http://www.comicrelief.com/" rel="home" target="_blank">
            <svg class="icon">
              <use xlink:href="#crlogo2018"></use>
            </svg>
          </a>
        </div>
        <div class="footer__copyright">
        <p>Comic  Relief  is  the  trading  name  of  Charity  Projects,  a  registered  charity  in  England  and Wales  (326568)  and  Scotland  (SC039730),  which  is a company  limited  by  guarantee registered in England and Wales (01806414) with its registered address at Hanover House, 14 Hanover Square, London, W1S 1HP</p>
        </div>
      </div>
    </div>
  </div>
</footer>
Source: _cr19-styleguide.scss, line 577