Mobile

Mobile menu

Requires JavaScript

Our version of the standard hamburger menu requires our Javascript and a bit more markdown. Here’s the basic structure; Scale the page down to see the menu below.

Demo

Markup

<div class="site-menu-wrapper">
  <img src="http://via.placeholder.com/150x72"/>
  <button class="site-menu-mobile-action">
    <span class="sr-only">Toggle Navigation</span>
    <i class="pi-menu pi-xl"></i>
  </button>
  <nav class="site-menu">
    <a href="#" class="site-menu__item">About</a>
    <a href="#" class="site-menu__item">Contact</a>
    <div class="dropdown">
      <button class="site-menu__item dropdown__trigger button--plain">
        Fruits <i class="ml-1 pi-angle-down"></i>
      </button>
      <div class="dropdown__content">
        <a href="" class="dropdown__content-item">Dragonfruit</a>
        <a href="" class="dropdown__content-item">Peach</a>
      </div>
    </div>
  </nav>
</div>