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>