Navigation
Different types of navigation
Source:
_cr19-styleguide.scss, line 585
Main Nav
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.
Example
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 591
Example
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 602
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 608
Expanded Footer
Expanded footer (aka TURBOFOOTER™) for the CR.com site in 2018
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 614