ember-bootstrap-context-menu

ember-bootstrap-context-menu is an Ember-addon that provides a simple mechanism for interaction with user using context menu. This addon is based on ember-bootstrap.

Installation

ember i ember-bootstrap-context-menu

Add next to your application.hbs:

1<ContextMenuContainer />

Add next to your app.scss (see negative-margin docs for more details) if you want to use multi-level context menu:

1$enable-negative-margins: true;

Usage:

1import Controller from '@ember/controller';
2import { action } from '@ember/object';
3import { inject as service } from '@ember/service';
4import ContextMenuManager from 'ember-bootstrap-context-menu/services/context-menu-manager';
5
6export default class ApplicationController extends Controller {
7  @service declare contextMenuManager: ContextMenuManager;
8
9  @action
10  showContextMenu(e: PointerEvent): void {
11    e.preventDefault();
12    e.stopPropagation();
13    this.contextMenuManager
14      .show([
15        { id: 'copy', title: 'Copy' },
16        { id: 'cut', title: 'Cut' },
17        { id: 'paste', title: 'Paste' },
18        { id: 'delete', title: 'Delete' },
19      ], e.pageX, e.pageY)
20      .then(({ id }) => {
21        if (id === 'delete') {
22          // do delete
23          return;
24        }
25        if (id === 'copy') {
26          // do copy
27          return;
28        }
29        if (id === 'cut') {
30          // do cut
31          return;
32        }
33        if (id === 'paste') {
34          // do paste
35          return;
36        }
37      });
38  }
39}

1<div {{on "contextmenu" this.showContextMenu}}>
2  Right click me
3</div>

Compatibility

• ember-bootstrap@6
• bootstrap@5

Demo

Check demo-page