Sport Relief PatternLab

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: main-nav.twig

<div class="main-nav__wrapper">
  <!-- Main navigation menu -->
  <nav role="navigation" class="navigation menu--main sticky-nav">
    <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 menu-item--expanded menu-item--active-trail">
        <a href="/link">Schools</a>
        <ul class="main-nav__items menu--level-1">
          <li class="menu-item menu-item--duplicate">
            <a href="/">
            </a>
          </li>
          <li class="menu-item">
            <a href="/" class="is-active">sub-item 1 (active)</a>
          </li>
          <li class="menu-item">
            <a href="/">sub-item 2, split over multiple lines</a>
          </li>
        </ul>
      </li>

      <li class="menu-item menu-item--expanded">
        <a href="/" class="is-active">Get involved</a>
        <ul class="main-nav__items menu--level-1">
          <li class="menu-item menu-item--duplicate">
            <a href="/">
            </a>
          </li>
          <li class="menu-item">
            <a href="/">sub-item 1</a>
          </li>
          <li class="menu-item">
            <a href="/">sub-item 2</a>
          </li>
        </ul>
      </li>




      <li class="menu-item menu-item--expanded menu-item--active-trail">
        <a href="/link">What is Sport Relief?</a>
        <ul class="main-nav__items menu--level-1">
          <li class="menu-item menu-item--duplicate">
            <a href="/">
            </a>
          </li>
          <li class="menu-item">
            <a href="/" class="is-active">sub-item 1 (active)</a>
          </li>
          <li class="menu-item">
            <a href="/">sub-item 2</a>
          </li>
        </ul>
      </li>

      <li class="menu-item menu-item--expanded menu-item--active-trail">
        <a href="/link">Donate</a>
        <ul class="main-nav__items menu--level-1">
          <li class="menu-item menu-item--duplicate">
            <a href="/">
            </a>
          </li>
          <li class="menu-item">
            <a href="/" class="is-active">sub-item 1 (active)</a>
          </li>
          <li class="menu-item">
            <a href="/">sub-item 2</a>
          </li>
        </ul>
      </li>

    </ul>
  </nav>
</div>

Source: _sr18-styleguide.scss, line 588

Feature Nav

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: _sr18-styleguide.scss, line 599

Footer Nav

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: _sr18-styleguide.scss, line 605

Navigation

Main Nav

Feature Nav

Footer Nav