Skip to content

Accordion Menu13.10.5

An Accordion Menu is mostly used for mobile navigation or dashboards.


$ npm i @if-design-system/accordion-menu@13.10.5

Edit this section

Overview

An Accordion Menu is mostly used for mobile navigation or dashboards.

Edit this section

Usage

There is currently no documentation for this section yet.
Contact the Design System team for questions.

If you want to contribute, you can also add the documentation yourself!

Edit this section

Behaviours

There is currently no documentation for this section yet.
Contact the Design System team for questions.

If you want to contribute, you can also add the documentation yourself!

Edit this section

Accessibility

Remember to use the correct role, aria- and html-attributes for the menu options.

<button
  role="menuitem"
  type="button"
  aria-expanded="false"
  aria-haspopup="true"
  aria-controls="overflow-menu-09943"
  id="mobile-menu-open-pages-index-01123"
  class="if mobile-menu-action button login"
>
  <Text>
</button>
<nav
  class="if accordion-menu is-open"
  tabindex="-1"
  role="menu"
  aria-labelledby="mobile-menu-open-pages-index-01123"
  id="menu-0123"
>
  <ul class="if is-open">
    <li class="if">
      <button tabindex="-1" role="menuitem" class="if" type="button">Reimburse</button>
    </li>
  </ul>
</nav>
Edit this section

Anatomy

Accordion menu
  1. First level
  2. Second level
  3. Third level
  4. Product icon
  5. Fourth level
Edit this section

Specs

Edit this section

Implementation

<nav class="if accordion-menu is-open" role="menu">
  <ul class="if">
    <li class="if"><a tabindex="-1" role="menuitem" class="if" href="/if-design-system/develop">Develop</a></li>
    <li class="if"><a tabindex="-1" role="menuitem" class="if" href="/if-design-system/develop">Resources</a></li>
    <li class="if is-parent is-active">
      <a tabindex="-1" role="menuitem" href="#if-design-system-introduction" class="if">Introduction</a>
      <div class="if accordion-menu is-open">
        <ul class="if is-open">
          <li class="if">
            <a tabindex="-1" role="menuitem" href="#if-design-system-introduction-concept---simply-personal" class="if"
              ><span class="if icon ui house"></span>Concept - Simply Personal</a
            >
          </li>
          <li class="if">
            <a
              tabindex="-1"
              role="menuitem"
              href="#if-design-system-introduction-the-if-visual-identity-at-a-glance"
              class="if"
              >The If Visual Identity at a glance</a
            >
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>
var accordionMenus = document.querySelectorAll('.if.accordion-menu');
Array.prototype.slice.call(accordionMenus).forEach(function(menu) {
  var expandableMenuActions = menu.querySelectorAll('li.is-parent > a, li.is-parent > button');

  Array.prototype.slice.call(expandableMenuActions).forEach(function(action) {
    action.addEventListener('click', function(e) {
      e.preventDefault();

      if (action.parentElement.classList.contains('is-active')) {
        action.parentElement.classList.remove('is-active');
        var expandedMenuItems = action.parentElement.querySelectorAll('li.is-parent.is-active');
        Array.prototype.slice.call(expandedMenuItems).forEach(function(item) {
          item.classList.remove('is-active');
        });
        var expandedSubMenus = action.parentElement.querySelectorAll('.is-open');
        Array.prototype.slice.call(expandedSubMenus).forEach(function(menu) {
          menu.classList.remove('is-open');
        });
      } else {
        action.parentElement.classList.add('is-active');
        action.parentElement.querySelector('.if.accordion-menu').classList.add('is-open');
        action.parentElement.querySelector('.if.accordion-menu > ul').classList.add('is-open');
      }
    });
  });
});
Edit this section

Contact us