Navigation
Different types of navigation
Source:
_shop18-styleguide.scss
, line 440
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:
_shop18-styleguide.scss
, line 446
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:
_shop18-styleguide.scss
, line 457
Example
Markup: components/navigation/footer-nav.twig
<div class="region region-footer cr-footer">
<nav role="navigation" aria-labelledby="block-campaign-base-footer-menu" id="block-campaign-base-footer" class="contextual-region block block-menu navigation menu--footer bg--black">
<h2 class="visually-hidden" id="block-campaign-base-footer-menu">Footer menu</h2>
<ul class="menu">
<li class="menu-item">
<a href="/web/node/1" data-drupal-link-system-path="/web/node/1">FAQ</a>
</li>
<li class="menu-item">
<a href="/web/node/2" data-drupal-link-system-path="/web/node/2">Legal</a>
</li>
<li class="menu-item">
<a href="/web/partners" data-drupal-link-system-path="/web/partners">Partners</a>
</li>
</ul>
</nav>
</div>
Source:
_shop18-styleguide.scss
, line 463