How to open context menu on right click

I am trying to figure out how to change default behaviour so that context-menu will open up on right click instead of left.

Can you explain which context menu you mean? Do you refer to

The context pad opens whenever the selected element(s) change(s). You can change that behavior to open on element.contextmenu. You can find all the events you can listen to here:


Could someone show some code example for how to do something along those lines?

I’m looking at the code in /lib/features/interaction-events/InteractionEvents.js and it does not seem very clear to me.

Any tips appreciated.

Also, I just realized that I am using bpmn-js and not diagram-js.

How might one alter bpmn-js to open context pad on right click?

Should I be using diagram-js to accomplish this instead?

I just realized that I am using bpmn-js (did not even know about diagram-js).

Any tips for where I could look to change this behaviour in bpmn-js?


bpmn-js is built on top of diagram-js. Are you working with BPMN diagrams? Then use bpmn-js.

Here’s an example of how to achieve your behavior:


do you know how to make it so that context-pad closes the second time that element is right clicked?

I’m trying to check contextPad for some kind of value that can show whether it is currently open or not.

    eventBus.on("element.contextmenu", event => {

      const { element } = event;

      if (!contextPad._overlayId) {;
      } else {

Is what I am doing in case anyone may be curious.