A utility for adding contextual shortcut menus to elements and components in Ember.js.

Usage no npm install needed!

<script type="module">
  import abcumEmberContextmenu from 'https://cdn.skypack.dev/@abcum/ember-contextmenu';



An ember addon for adding contextual shortcut menus to an Ember.js app.



ember install @abcum/ember-contextmenu


The ember-contextmenu addon adds functionality for adding contextual shortcut menus to an Ember.js app, using the right click button. A custom context menu can be applied to the whole application, in addition to individual menus for a specific area, or an ember component.


Add the context-menu component to your application template.

{{!-- app/templates/application.hbs --}}

To prevent the default menu from appearing, add the right-click component to the application template.

{{!-- app/templates/application.hbs --}}
{{#right-click menu="application.menu"}}
    {{!-- all content --}}
{{!-- app/templates/application/menu.hbs --}}
<div class="context-menu-item" {{action (history-back)}}>Back</div>
<div class="context-menu-item" {{action (history-forward)}}>Forward</div>
<div class="context-menu-item" {{action (reload)}}>Reload</div>
<div class="context-menu-item" {{action (transition-to 'logout')}}>Logout</div>
<div class="context-menu-line"></div>
<div class="context-menu-item disabled">© Abcum Ltd</div>

When adding a menu to a component use the context-menu mixin, and specify a file using the menuName key.

import Ember from "ember";
import MenuMixin from 'ember-contextmenu/mixins/context-menu';

export default Ember.Component.extend(MenuMixin, {
    menuName: 'posts.menu',

Or if you want to display a menu after an action, use the context-menu helper, specifying a filename.

{{#each model as |post|}}
    {{blog-post contextMenu=(context-menu 'post.menu' model=post)}}


  • make install (install bower and ember-cli dependencies)
  • make upgrade (upgrade ember-cli to the specified version)
  • make tests (run all tests defined in the package)