The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Bootstrap Contextmenu

    Context menu plugin for Twitter's Bootstrap framework
    Filed under 

    • 🔾34%Overall
    • 644
    • 54.1 days
    • 🕩192
    • 👥14

    Bootstrap Context Menu

    #This project is unmaintained. Please use the alternative

    I have an issue with the plugin but I would still like to use it.

    -- Please fork the project and do your fixes.

    Where can I get support if can't fix some issue?

    -- You can check the issues page or pull request page if someone has a fix for your problem and merge it with your fork.

    I still can't find fixes of my issues.

    -- Get plenty of sleep. :)

    A context menu extension of Bootstrap made for everyone's convenience.

    See a demo page.


    bower install bootstrap-contextmenu

    Note: Requires bootstrap.css


    Via data attributes

    Add data-toggle="context" to any element that needs a custom context menu and via CSS set position: relative to the element.

    Point data-target attribute to your custom context menu.

    <div class="context" data-toggle="context" data-target="#context-menu"></div>

    Via Javascript

    Call the context menu via JavaScript:

      before: function(e,context) {
        // execute code before context menu if shown
      onItem: function(context,e) {
        // execute on menu item selection


    target - is the equivalent of the data-target attribute. It identifies the html of the menu that will be displayed.

    before - is a function that is called before the context menu is displayed. If this function returns false, the context menu will not be displayed. It is passed two parameters,

    • e - the original event. (You can do an e.preventDefault() to cancel the browser event).
    • context - the DOM element where right click occured.

    onItem - is a function that is called when a menu item is clicked. Useful when you want to execute a specific function when an item is clicked. It is passed two parameters,

    • context - the DOM element where right click occured.
    • e - the click event of the menu item, $( is the item element.

    scopes - DOM selector for dynamically added context elements. See issue.


    All events are fired at the context's menu. Check out dropdown plugin for a complete description of events.

    • - This event fires immediately when the menu is opened.
    • - This event is fired when the dropdown has been made visible to the user.
    • - This event is fired immediately when the hide instance method has been called.
    • - This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).


    $('#myMenu').on('',function () {
      // do something...


    Activate and specify selector for context menu


    Activate within a div, but not on spans

      target: '#context-menu2',
      before: function (e, element, target) {
          if ( == 'SPAN') {
              return false;
          return true;

    Modify the menu dynamically

      target: "#myMenu",
      before: function(e) { 
        this.getMenu().find("li").eq(2).find('a').html("This was dynamically changed");

    Show menu name on selection

      onItem: function(context, e) {

    Nice to have features:

    • Close and open animations
    • Keyboard shortcuts for menus



    Show All