Menu driven applications

With just a few lines of code

JavaScript & CSS3

Smooth transitions using key-frames

Fully Customizable

16 available options

Lightweight

Only ~30kb, minified

7 Transition Effects

Including fade, flip and slide

Action Hooks

Bind functions to specific stages

jQueryUI Plugin

Integrated into the widget factory

Dynamic Content

Load menu items dynamically

Arrow Navigation

Navigate using your keyboard

Features

  • Lightweight
  • JavaScript + CSS3
  • Fully documented
  • 16 customizable options
  • 7 transition effects
  • 3 action hooks
  • 4 menu item types
  • Dynamic event binding
  • Various trigger events
  • HIDPI ready
  • Custom positioning
  • jQueryUI plugin

Demos

ContextMenu.js

ContextMenu.js is a jQuery plugin for creating highly customizable drop down menus triggerable by various mouse events. Use it to create context menus, drop down lists, navigations, and more. Here are a few examples of the power of ContextMenu.js:

As a Context Menu

Right Click Here

As a Drop-Down List

You can also use the arrow keys to navigate

Menu Items

Menus can be constructed using one or more of the 4 available menu item types: divider, title, item, checkbox. The item type can have nested items, or "sub menus".

Right Click Here

$('#element').contextMenu({
    items: [
        {type: 'title', text: 'Title'},
        {type: 'item', text: 'Item'},
        {type: 'item', text: 'Item with submenu',
            items: [
                {type: 'item', text: 'Submenu item 1'},
                {type: 'item', text: 'Submenu item 2'},
                {type: 'item', text: 'Submenu item 3'}
            ]
        },
        {type: 'divider'},
        {type: 'checkbox', text: 'Checkbox', checked: true}
    ]
});

Positioning

Drop down menus can be positioned relative to the target element. The syntax used is similar to the one used by jQuery.position. Additionally, by setting at: 'mouse' the menu can be positioned according to the mouse coordinates.

Notice that the menu will automatically be placed inside the screen if it collides with the window's boundaries.

my: 'left bottom'
at: 'center top-5'
my: 'left top+5'
at: 'left bottom'
my: 'right-5 top'
at: 'left top'
my: 'left top'
at: 'right+5 top'

It is also possible to reposition the menu when clicking on certain children of the target element:

Subitem
Subitem
Subitem

Subitem
Subitem
Subitem

$('#element').contextMenu({
    position: {
        my: 'left top',
        at: 'center bottom', 
        children: '.context-click-subitem'
    },
    items: [ ... ]
});

Item Events

Hover and click event listeners can be assigned to each menu item using the hover and click arguments.

Right Click Here

$('#element').contextMenu({
    items: [
        {
            type: 'item', 
            text: 'Click Me', 
            click: function(e) {
                alert('Item clicked');
            }
        },
        {
            type: 'item', 
            text: 'Hover Over Me', 
            hover: function(e) {
                alert('Item hovered over');
            }
        }
    ]
});

Menu-wide events

You can set click & hover event listeners to all menu items at once by using the click and hover general options.

$('#element').contextMenu({
    click: function(e) {
        // 'this' refers to the clicked item
        alert('The item "'+this.text+'" was clicked');
    },
    items: [
        {type: 'item', text: 'Item 1'},
        {type: 'item', text: 'Item 2'},
        {type: 'item', text: 'Item 3', click: function(e){alert('Click event overridden by '+this.text);}}
    ]
});

Dynamic Event Binding

Context menus can be bound to dynamically created elements using the selector argument.

// Select any element that exists at the time of the call
$('html').contextMenu({ 
    // Selector string pointing to the dynamic element
    selector: '.dynamic-child', 
    items: [ ... ]
});

Transition Effects

There are various custom transition effects that can be used to show/hide the menu. Here are a few examples (right click to show menu):

None
Fade In
Slide Top
Slide Bottom
Slide Left
Slide Right
Flip Horizontal
Flip Vertical

$('#element').contextMenu({
    transition {
        speed: 300, // In milliseconds
        type: 'fadeIn'
    },
    items: [ ... ]
});

Auto Hiding

Context menus can be set to automatically hide when the cursor moves out of them.

Right Click Here

$('#element').contextMenu({
    autoHide: 500, // Time in milliseconds, 
                   // or 'false' to disable auto hiding
    items: [ ... ]
});

Triggering Events

Drop down menus can be triggered by different mouse events. This can be used in conjunction with the custom positioning option to create menus for different purposes.

Note that hover context menus are auto-hidden by default. For that reason, it is recommended to set the autoHide option to something other than the default 0.

Hover
Click
Double Click
Context Menu

$('#element').contextMenu({
    autoHide: 300, // Wait 300ms before hiding the menu
    event: 'hover', // Or [click|dblclick|contextmenu|focus]
    items: [ ... ]
});

Dynamic Items

Menus can be dynamically constructed after an event has been triggered. This can be used to create event-specific menus on the fly. The menus are destroyed and reconstructed every time.

In the following example, a different menu will be generated for each of the subitems.

Subitem 1
Subitem 2
Subitem 3

Subitem 4
Subitem 5
Subitem 6

$('#element').contextMenu({
    items: function(e) {
        return [
            {type: 'title', text: $(e.target).is('.context-click-subitem') ? e.target.innerHTML : 'All Items'},
            {type: 'divider'},
            {type: 'item', text: 'Cut', icon: 'fa fa-scissors'},
            {type: 'item', text: 'Copy', icon: 'fa fa-files-o'},
            {type: 'item', text: 'Paste', icon: 'fa fa-clipboard'},
        ]
    }
});

Action Hooks

There are 3 actions that can be hooked to for running custom functions at specific times. In the following example, two of them, position and hide, are used to change the color of the elements currently active.

Subitem
Subitem
Subitem

Subitem
Subitem
Subitem

$('#element').contextMenu({
    items: [ ... ],
    hooks: {
        // Called when the menu is shown
        show: function(e) {},
        
        // Called when the menu is repositioned (also called every time the menu is shown)
        position: function(e){
            if(typeof activeItem !== 'undefined')
            {
                $(activeItem).css({'box-shadow':'none'});
            }
            activeItem = e.target;
            $(e.target).css({'box-shadow':'0 0 0 4px #f1c40f'});
        },

        // Called when the menu is hidden
        hide: function(e){
            $(activeItem).css({'box-shadow':'none'});
        }
    }
});

Spread the word about ContextMenu.js!