Navigation
Different types of navigation
Source:
_cr17-styleguide.scss, line 458
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
<div class="main-nav__wrapper">
<!-- Main navigation menu -->
<nav role="navigation" class="navigation menu--main">
<div class="main-nav__icons main-nav__burger">
<a role="button" class="c-hamburger c-hamburger--htx main-nav-toggle" href="#" aria-expanded="false" aria-haspopup="true">
<div class="c-hamburger__text">
<span class="visually-hidden">Open and close Navigation Menu</span>
</div>
<span></span>
</a>
</div>
<h2 class="visually-hidden" id="main-nav__title"> Main navigation menu </h2>
<!-- Mobile: navigation toggle button -->
<ul id="main-menu" class="main-nav__items sm menu--level-0 ">
<li class="menu-item">
<a href="/home">Home</a>
</li>
<li class="menu-item menu-item--expanded">
{# Add haspopup attr to our 'button' items #}
<a href="/fundraise" class="is-active" aria-haspopup="true" aria-expanded="false">Fundraise (active)</a>
<ul class="main-nav__items menu--level-1">
<li class="menu-item menu-item--duplicate">
<a href="/fundraise">
</a>
</li>
<li class="menu-item">
<a href="/sub-item-1">sub-item 1</a>
</li>
<li class="menu-item">
<a href="/sub-item 2">sub-item 2</a>
</li>
</ul>
</li>
<li class="menu-item menu-item--expanded menu-item--active-trail">
<a href="/link" aria-haspopup="true" aria-expanded="false">What's going on</a>
<ul class="main-nav__items menu--level-1">
<li class="menu-item menu-item--duplicate">
<a href="/whats-going-on">
</a>
</li>
<li class="menu-item">
<a href="/sub-item-1" class="is-active">sub-item 1 (active)</a>
</li>
<li class="menu-item">
<a href="/sub-item 2">sub-item 2</a>
</li>
</ul>
</li>
<li class="menu-item menu-item--expanded">
<a href="/FAQ" aria-haspopup="true" aria-expanded="false">FAQ</a>
<ul class="main-nav__items menu--level-1">
<li class="menu-item menu-item--duplicate">
<a href="/FAQ">
</a>
</li>
<li class="menu-item">
<a href="/sub-item-1">sub-item 1</a>
</li>
<li class="menu-item">
<a href="/sub-item-2">sub-item 2</a>
</li>
</ul>
</li>
<li class="menu-item menu-item--expanded">
<a href="/legal" aria-haspopup="true" aria-expanded="false">Legal</a>
<ul class="main-nav__items menu--level-1">
<li class="menu-item menu-item--duplicate">
<a href="/legal">
</a>
</li>
<li class="menu-item">
<a href="/sub-item-1">sub-item 1</a>
</li>
<li class="menu-item">
<a href="/sub-item-2">sub-item 2</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
Source:
_cr17-styleguide.scss, line 464
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:
_cr17-styleguide.scss, line 475
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:
_cr17-styleguide.scss, line 481