Basic demos

Demo 1

On instantiation, the context menu is given a selector of elements where it will be triggered.

In this example, it will open anywhere inside the box on right click.

Right click anywhere inside this box

var menu = new BootstrapMenu('#demo1Box', {
  actions: [{
      name: 'Action',
      onClick: function() {
        toastr.info("'Action' clicked!");
      }
    }, {
      name: 'Another action',
      onClick: function() {
        toastr.info("'Another action' clicked!");
      }
    }, {
      name: 'A third action',
      onClick: function() {
        toastr.info("'A third action' clicked!");
      }
  }]
});

Demo 2

You can also trigger the context menu to different events, and position it relative to the element where it was triggered.

View the code

var menu1 = new BootstrapMenu('#demo2LeftBtn', {
  menuEvent: 'click', // default value, can be omitted
  menuSource: 'element',
  menuPosition: 'belowLeft', // default value, can be omitted
  actions: /* ... */
});

var menu2 = new BootstrapMenu('#demo2RightBtn', {
  menuEvent: 'right-click',
  menuSource: 'element',
  menuPosition: 'belowLeft',
  actions: /* ... */
});

var menu3 = new BootstrapMenu('#demo2HoverBtn', {
  menuEvent: 'hover',
  menuSource: 'element',
  menuPosition: 'belowRight', // matches element's right side
  actions: /* ... */
});

Advanced demos

Demo 3

The onClick listeners can be aware of which one of a set of elements was clicked.

#	Name	Description
1	First row	Lorem ipsum dolor sit amet
2	Second row	Nemo enim ipsam voluptatem quia voluptas
3	Third row	Ut enim ad minima veniam

View the code

/* A centralized container of the table data. You could hold the
 * row-specific data in a data-whatever-info="" attribute in each
 * row, you decide what fetchElementData() does!
 */
var demo3Rows = {
  '1': { name: 'First row', description: 'Lorem ipsum dolor sit amet' },
  '2': { name: 'Second row', description: 'Nemo enim ipsam voluptatem quia voluptas' },
  '3': { name: 'Third row', description: 'Ut enim ad minima veniam' }
};

var menu = new BootstrapMenu('.demo3TableRow', {
  /* a function to know which row was the context menu opened on,
   * given the selected DOM element. When this function is defined,
   * every user-defined action callback receives its return value as
   * an argument. */
  fetchElementData: function($rowElem) {
    var rowId = $rowElem.data('rowId');
    return demo3Rows[rowId];
  },
  actions: [{
    name: 'Edit name',
    onClick: function(row) {
      toastr.info("'Edit name' clicked on '" + row.name + "'");
    }
  }, {
    name: 'Edit description',
    onClick: function(row) {
      toastr.info("'Edit description' clicked on '" + row.name + "'");
    }
  }]
});

Demo 4

You can give every action an id and group them in the dropdown with the actionsGroups option. You can also use isShown and isEnabled callbacks in an action to control when it should not appear, or appear disabled.

Font Awesome icons can be used adding the iconClass property to an action, with the class name of the icon to use.

#	Name	Description
1	First row	Lorem ipsum dolor sit amet
2	Second row	Nemo enim ipsam voluptatem quia voluptas	Not editable
3	Third row	Ut enim ad minima veniam	Not deletable

View the code

var demo4Rows = {
  '1': { name: 'First row', isEditable: true, isRemovable: true },
  '2': { name: 'Second row', isEditable: false, isRemovable: true },
  '3': { name: 'Third row', isEditable: true, isRemovable: false }
};

var menu = new BootstrapMenu('.demo4TableRow', {
  fetchElementData: function($rowElem) {
    var rowId = $rowElem.data('rowId');
    return demo4Rows[rowId];
  },
  /* group actions by their id to make use of separators between
   * them in the context menu. Actions not added to any group with
   * this option will appear in a default group of their own. */
  actionsGroups: [
    ['setEditable', 'setUneditable' ],
    ['deleteRow']
  ],
  /* you can declare 'actions' as an object instead of an array,
   * and its keys will be used as action ids. */
  actions: {
    editName: {
      name: 'Edit name',
      iconClass: 'fa-pencil',
      onClick: function(row) {
        toastr.info("'Edit name' clicked on '" + row.name + "'");
      },
      isEnabled: function(row) {
        return row.isEditable;
      }
    },
    editDescription: {
      name: 'Edit description',
      iconClass: 'fa-pencil',
      onClick: function(row) {
        toastr.info("'Edit description' clicked on '" + row.name + "'");
      },
      isEnabled: function(row) {
        return row.isEditable;
      }
    },
    setEditable: {
      name: 'Set editable',
      iconClass: 'fa-unlock',
      onClick: function(row) {
        toastr.info("'Set editable' clicked on '" + row.name + "'");
      },
      isShown: function(row) {
        return !row.isEditable;
      }
    },
    setUneditable: {
      name: 'Set uneditable',
      iconClass: 'fa-lock',
      onClick: function(row) {
        toastr.info("'Set uneditable' clicked on '" + row.name + "'");
      },
      isShown: function(row) {
        return row.isEditable;
      }
    },
    deleteRow: {
      name: 'Delete row',
      iconClass: 'fa-trash-o',
      onClick: function(row) {
        toastr.info("'Delete row' clicked on '" + row.name + "'");
      },
      isEnabled: function(row) {
        return row.isEditable && row.isRemovable;
      }
    }
  }
});

Demo 5

Classes can also be added easily to an action by setting a classNames property, which will be parsed through the classnames utility. This property can be a string, an object or a function that receives the element's fetched data as a first argument.

In the same way, an action's name can be defined as a function. In that case, it will be called before each render of the menu, receiving as the first argument the data returned by fetchElementData.

#	Name	Description
1	John Martin	Lorem ipsum dolor sit amet
2	Peter Roberts	Nemo enim ipsam voluptatem quia voluptas
3	Stuart Smith	Ut enim ad minima veniam	Not editable

View the code

var demo5Rows = {
  '1': { first_name: 'John', last_name: 'Martin', is_editable: true },
  '2': { first_name: 'Peter', last_name: 'Roberts', is_editable: true },
  '3': { first_name: 'Stuart', last_name: 'Smith', is_editable: false }
};

var menu = new BootstrapMenu('.demo5TableRow', {
  fetchElementData: function($rowElem) {
    var rowId = $rowElem.data('rowId');
    return demo5Rows[rowId];
  },
  actions: [{
    name: function(row) {
      // custom action name, with the name of the selected user
      if (row.is_editable) {
        return 'Edit ' + row.first_name;
      }
      // basic HTML can also be rendered in the action name
      return '<i>Not editable</i>';
    },
    iconClass: 'fa-pencil',
    classNames: function(row) {
      // add the 'action-success' class only if the row is editable
      return { 'action-success': row.is_editable };
    },
    onClick: function(row) {
      toastr.info("'Edit description' clicked on '" + row.first_name + "'");
    },
    isEnabled: function(row) {
      return row.is_editable;
    }
  }, {
    // custom action name, with the name of the selected user
    name: function(row) {
      return 'Message ' + row.first_name;
    },
    iconClass: 'fa-envelope-o',
    onClick: function(row) {
      toastr.info("'Message " + row.first_name + "' clicked on '" + row.first_name + "'");
    }
  }, {
    name: 'Block account',
    iconClass: 'fa-trash-o',
    // always add the class 'action-danger'
    classNames: 'action-danger',
    onClick: function(row) {
      toastr.info("'Delete row' clicked on '" + row.first_name + "'");
    }
  }]
});