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="id1801a39992">Item One</a>
      <ul class="overflow-menu__submenu">
        <li class="overflow-menu__item">
          <a href="#">Qui unde</a>
        </li>
        <li class="overflow-menu__item">
          <a href="#">Ullam reiciendis</a>
        </li>
        <li class="overflow-menu__item">
          <a href="#">Excepturi harum</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="idbff80f97b9">Item Two</a>
      <ul class="overflow-menu__submenu">
        <li class="overflow-menu__item">
          <a href="#">Libero laborum</a>
        </li>
        <li class="overflow-menu__item">
          <a href="#">Maxime iusto</a>
        </li>
        <li class="overflow-menu__item">
          <a href="#">Voluptas laborum</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>