Back to Contextual Menu-guidelines

JavaScriptThe latest version of this package is: 0.17.4, Opens in new window

Javascript library for the Contextual Menu Component

This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-js/contextual-menu@0.17.4

Table of Contents

Accessibility

  • Keyboard accessible, users can navigate with arrow keys

Usage

Install

  $ npm i @ids-js/contextual-menu

The Contextual Menu is always triggered form an icon button/control.

<!-- 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>

Init

With script tag

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

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

As a module

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

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

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

Api

init(el)

Initializes the Contextual Menu Component with the given arguments.

Param Type Description
el HTMLElement The Contextual Menu DOM Element

el : HTMLElement

The Contextual Menu DOM Element:

<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>
Contact us, Opens in new window