Lightweight jQuery Context Menu Plugin - nuContextMenu

nuContextMenu is a lightweight (~3kb) jQuery plugin used to generate a fully configurable context menu within a given container that is triggered by right click.

How to use it:

1. Include jQuery nuContextMenu plugin's files on the web page. Be sure the jquery.nu-context-menu.js is loaded after jQuery library.

<link href="src/nu-context-menu.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/jquery.nu-context-menu.js"></script>

2. Include Font Awesome 4 for menu icons.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

3. Call the function on the target container and dd menu items to the context menu as follow.

$(function() {
  var context = $('body').nuContextMenu({

      items: '.container',

      menu: {

          'home': {
              title: 'Home',
              // Font awesome icons here
              icon: 'home',
          },

          'contact': {
              title: 'Contact',
              icon: 'envelope',
          },
    
    'about': {
              title: 'About',
              icon: 'user',
          },

          // If the value is 'separator' then an 
          // <hr> node is added
          'void': 'separator',

          'logout': {
              title: 'Log out',
              icon: 'power-off',
          },
      }
  });

});

4. Execute a callback when you click on a menu item.

callback: function(key, element) {
  alert('Clicked ' + key + ' on ' + $(element).attr('id'));
},

5. Disable the context menu.

context.nuContextMenu('disable');

Change logs:

2015-12-16

• bugfix

2015-12-10

• Changed api to guarantee order

2015-12-09

• Allows to bind to dynamically created elements

2015-11-26

• Fixed: Context doesn't hide when item chosen

2015-11-14

• JS update.

---

This awesome jQuery plugin is developed by avxto. For more Advanced Usages, please check the demo page or visit the official website.