<!-- The parent element needs to have position relative/absolute -->
<div class="if" style="position: relative;">
  <button
    class="if contextual-menu-button js-contextual-menu"
    id="<id-for-trigger>"
    tabindex="0"
    aria-haspopup="true"
    aria-controls="<id-for-nav-element>"
    aria-expanded="true"
    aria-label="Menu title"
    type="button"
  ></button>
  <nav
    style="top: 48px;"
    class="if contextual-menu is-open"
    tabindex="-1"
    role="menu"
    aria-labelledby="<id-for-trigger>"
    id="<id-for-nav-element>"
  >
    <ul class="if is-open">
      <li class="if">
        <button tabindex="-1" role="menuitem" class="if" href="asdasd" disabled>
          Adjust dates
        </button>
      </li>
      <li class="if">
        <a tabindex="-1" role="menuitem" class="if" href="asdsadsadsa" disabled>
          Send to debt collection
        </a>
      </li>
      <li class="if">
        <button tabindex="-1" role="menuitem" class="if" type="button">
          Add to watch list
        </button>
      </li>
      <li class="if separator"></li>
      <li class="if">
        <button tabindex="-1" role="menuitem" class="if" type="button">
          Reimburse
        </button>
      </li>
    </ul>
  </nav>
</div>

<script src="./contextual-menu.iife.js"></script>
<script>
  const contextualMenuTriggers = document.querySelectorAll(
    '.if.contextual-menu-button'
  );

  contextualMenuTriggers.forEach((trigger) => {
    IDSContextualMenu.init(trigger);
  });
</script>

import { init as idsContextualMenu } from '@ids-js/contextual-menu';

const contextualMenus = document.querySelectorAll('.if.contextual-menu');

Array.prototype.slice.call(contextualMenus).forEach(idsContextualMenu);

<button
  class="if contextual-menu-button js-contextual-menu"
  id="overflow-menu-07-trigger"
  tabindex="0"
  aria-haspopup="true"
  aria-controls="overflow-menu-07"
  aria-expanded="true"
  aria-label="Menu title"
  type="button"
></button>
<nav
  style="top: 48px;"
  class="if contextual-menu is-open"
  tabindex="-1"
  role="menu"
  aria-labelledby="overflow-menu-07-trigger"
  id="overflow-menu-07"
>
  <ul class="if is-open">
    <li class="if">
      <button tabindex="-1" role="menuitem" class="if" href="asdasd" disabled>
        Adjust dates
      </button>
    </li>
    <li class="if">
      <a tabindex="-1" role="menuitem" class="if" href="asdsadsadsa" disabled>
        Send to debt collection
      </a>
    </li>
    <li class="if">
      <button tabindex="-1" role="menuitem" class="if" type="button">
        Add to watch list
      </button>
    </li>
    <li class="if separator"></li>
    <li class="if">
      <button tabindex="-1" role="menuitem" class="if" type="button">
        Reimburse
      </button>
    </li>
  </ul>
</nav>