Overflow menu

Overview

Used in the product menu.

Add the aria-current="page" attribute to the current page link.

Examples

Velit aut debitis vitae eum et saepe recusandae odit dolorum voluptas ullam. harum cum quia amet accusamus. eaque tempora necessitatibus enim voluptatem eum eius. reprehenderit vero in itaque accusamus eum ea aut tempore explicabo facilis cupiditate consequatur ut repellat. molestias est tempora laborum quae alias voluptatem eligendi magnam culpa nisi rerum. et velit similique dolorum corporis dolores incidunt. repudiandae facere commodi eveniet possimus voluptatem non nihil velit.

Ullam fuga enim delectus eum omnis voluptas nulla et voluptatem impedit et commodi. et voluptatem asperiores nesciunt harum consequatur dolores sapiente voluptatem veritatis est. hic doloremque exercitationem commodi voluptas fugiat incidunt qui id est excepturi culpa. neque voluptate doloribus animi autem. quia expedita aut est tenetur ut consequatur est dicta dolor aperiam.

Eum natus tenetur voluptatum voluptas quia commodi nisi ducimus totam. corporis fugiat voluptatum aspernatur mollitia. doloremque dicta nihil ullam cum harum dolorem quibusdam iste sint nemo placeat. ad ex et cum sunt sit earum nobis ea fugit voluptatem dolores. numquam dicta iusto fugit dolorem cumque ut quo et.

Reiciendis dolorum eveniet ad quas illum consectetur occaecati ratione magni corporis cum voluptatem voluptatem. repudiandae iure voluptatem et quisquam atque dolorum molestias quaerat doloribus tempore impedit molestias quia facilis. dolores adipisci qui nesciunt libero consectetur atque at deleniti similique excepturi. voluptatem perspiciatis officia adipisci molestias et distinctio temporibus quidem delectus nulla tempore nisi non.

Hic voluptatum veniam architecto est reiciendis voluptatem eaque id officiis aut incidunt. qui sit quidem omnis ducimus ipsa adipisci harum. esse ut modi rerum ut perspiciatis repudiandae est aut sint officia in quo quod aut. blanditiis ea tempore qui ipsum voluptate ipsum est adipisci eos accusantium. non tempora unde quos eum ex inventore aliquam.

Code

<nav id="id37ec9988d9" 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="id0e9424a980">Item One</a>
      <ul class="overflow-menu__submenu">
        <li class="overflow-menu__item">
          <a href="#">Consectetur deleniti</a>
        </li>
        <li class="overflow-menu__item">
          <a href="#">Qui quaerat</a>
        </li>
        <li class="overflow-menu__item">
          <a href="#">Dolorum recusandae</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="idfb08ee65d0">Item Two</a>
      <ul class="overflow-menu__submenu">
        <li class="overflow-menu__item">
          <a href="#">Rerum quo</a>
        </li>
        <li class="overflow-menu__item">
          <a href="#">Est et</a>
        </li>
        <li class="overflow-menu__item">
          <a href="#">Rerum ea</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>

document.addEventListener('designFrameworkReady', function() {
  var overflowMenus = ['id37ec9988d9', 'id2a5bd41ea6', 'id422c941a95']
  overflowMenus.forEach(function(overflowMenuId) {
    UCASUtilities.overflowMenu.create(
      overflowMenuId,
      function() {
        // Optional callback for when the menu is contracting.
        console.log(overflowMenuId, 'contract')
      },
      function() {
        // Optional callback for when the menu is expanding.
        console.log(overflowMenuId, 'expand')
      }
    )
  })
})