News from the project

Reworked Popup Menu Lands in diagram-js

Published by Nico Rehwaldt on Wednesday, 07 December 2022.

bpmn-js11.0.0 diagram-js11.0.0 dmn-js14.0.0

We are happy to announce new major releases of our core diagramming and editor toolkits. The new releases ship a powerful new popup menu that is keyboard accessible, versatile, and scalable across many different use cases.

The popup menu is a core utility that powers many parts of our modeling UX: Anywhere on the canvas, you can open a menu to offer actions for the user. It can be customized by extensions and used throughout our modeling tools to implement the replace menu, alignment utilities, color pickers, or create/append anything.

The diagram-js@11 release reworks the tool, adding state-of-the-art features, improved scalability, and a fresh new look.

New diagram-js popup menu

The new popup menu has a fresh look, search/filtering, and many other goodies.

Try it on

Scalable and (Keyboard) Accessible

The new popup menu solves a couple of issues, an important one being scaling: A static menu does not work well beyond a few options. The reworked menu is scrollable and (optionally) allows you to search/filter for entries via your keyboard.

You can drive many parts of the core editor using your keyboard, so why not the popup menu? The reworked menu is completely keyboard-accessible, enabling end-to-end keyboard-only flows. For example, use the new <r> shortcut in the BPMN editor to replace an element, never leaving your keyboard:

Screen capture showing the new keyboard-only replace workflow

Enjoy new keyboard-only journeys.

Another noteworthy improvement in the accessibility realm is that you can now attach a title to your menu. Use it wisely to establish additional context.


As before the menu is versatile enough to be used in a number of different scenarios. Decide per entry whether you want to display icon only, labels, or both.

New diagram-js popup menu integrated in bpmn-js-color-picker

Icon only popup menu added via the color picker extension.

The new popup menu considers additional meta-data provided through entries:

  • description allows you to add descriptive text
  • documentationRef allows you to link documentation resources
  • group allows you to group entries semantically

Use that meta-data to make actions more meaningful to your users.

New diagram-js popup menu in action

Supporting create/append anything, and more.

How to Migrate

As expected in a rework, the HTML structure and CSS classes changed in the restructuring process. Because of that, we advise you to double-check your style customizations as you upgrade to diagram-js@11 or one of our latest editor toolkit major releases.

API-wise this release is backward compatible. That means popup menu entry providers continue to work as expected, as do your custom popup menus.

Wrapping up

As users of our demo may have noticed, the reworked popup menu is only the first step on our journey to incorporate create/append anything into our core. Stay tuned for future exciting updates in core modeling.

Did we miss anything? Did you spot a bug, or would you like to suggest an improvement?

Reach out to us via our forums, toot us on Mastodon, or file any issue you found in the respective issue trackers for bpmn-js or diagram-js.

Are you passionate about JavaScript, modeling, and the web?
Join Camunda and build modeling tools people heart.