Main nav - resize to see responsive

 

Main navigation + submenu

<button class="icon-button icon-button--menu">
  <i class="material-icons">menu</i>
</button>

<div class="menu">
  <ul class="menu__list">
    <li class="menu__list-item menu__list-item--has-submenu">
    <a href="#">Link with submenu</a>
      <div class="menu__children">
        <div class="submenu__wrapper">
          <div class="submenu">
            <ul class="submenu__list">
              <li class="submenu__list-item">
                <a href="#">Submenu link</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li class="menu__list-item">
      <a href="#">Link here</a>
    </li>
  </ul>
</div>

<div class="responsive-nav" id="responsive-nav">
  <div class="menu menu--mobile">
    <div class="menu__content menu__content--mobile">
      <ul class="menu__list menu__list--mobile">
        <li class="menu__list-item menu__list-item--mobile menu__list-item--has-submenu">
          <a href="#" class="toggle">Link with submenu</a>
          <div class="menu__children menu__children--mobile">
            <div class="submenu__wrapper submenu__wrapper--mobile">
              <div class="submenu submenu--mobile">
                <ul class="submenu__list submenu__list--mobile">
                  <li class="submenu__list-item submenu__list-item--mobile">
                    <a href="#">Submenu link</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </li>
        <li class="menu__list-item menu__list-item--mobile">
          <a href="#">Link here</a>
        </li>
      </ul>
    </div>
  </div>
</div>