Navigation

Different types of navigation

Source: _shop18-styleguide.scss, line 440

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
<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
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