Tracker

Product navigation

Uses the overflow menu pattern.

Code

<nav id="product-nav" class="overflow-menu-container">
  <ul class="overflow-menu overflow-menu--main">
    <li class="overflow-menu__item">
      <a href="#" aria-expanded="false" class="overflow-menu__main-toggle icon-inline--right icon--chevron-down-dark" id="idbcb3576615">Item One</a>
      <ul class="overflow-menu__submenu">
        <li class="overflow-menu__item">
          <a href="#">Nobis consequatur</a>
        </li>
        <li class="overflow-menu__item">
          <a href="#">Sunt eos</a>
        </li>
        <li class="overflow-menu__item">
          <a href="#">Occaecati quas</a>
        </li>
      </ul>
    </li>
    <li class="overflow-menu__item">
      <a href="#" aria-expanded="false" class="overflow-menu__main-toggle icon-inline--right icon--chevron-down-dark" id="id8b3a279eff">Item Two</a>
      <ul class="overflow-menu__submenu">
        <li class="overflow-menu__item">
          <a href="#">Quo provident</a>
        </li>
        <li class="overflow-menu__item">
          <a href="#">Possimus minima</a>
        </li>
        <li class="overflow-menu__item">
          <a href="#">Recusandae debitis</a>
        </li>
      </ul>
    </li>
    <li class="overflow-menu__item">
      <a href="#">Item Three</a>
    </li>
    <li class="overflow-menu__item">
      <a href="#">Item Four</a>
    </li>
    <li class="overflow-menu__item">
      <a href="#">Item Five</a>
    </li>
  </ul>
</nav>