Lightweight jQuery Context Menu Plugin - nuContextMenu

File Size: 7.03 KB
Views Total: 2133
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 is loaded after jQuery library.

<link href="src/nu-context-menu.css" rel="stylesheet">
<script src="//"></script>
<script src="src/"></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.


Change logs:


  • bugfix


  • Changed api to guarantee order


  • Allows to bind to dynamically created elements


  • Fixed: Context doesn't hide when item chosen


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