Context Menu Plugin For Bootstrap - jQuery Hummingbird Popover

File Size: 9.84 KB
Views Total: 1968
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Context Menu Plugin For Bootstrap - jQuery Hummingbird Popover

The Hummingbird Popover plugin utilizes Bootstrap popover component to create a multi-level context menu triggered by right click.

How to use it:

1. Include the needed jQuery library and Bootstrap framework on the webpage.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Include the Font Awesome for the caret icon.

<link rel="stylesheet" href="/path/to/fontawesome.min.css">

3. Include the jQuery Hummingbird Popover plugin's files on the webpage.

<link href="hummingbird-popover.css" rel="stylesheet">
<script src="hummingbird-popover.js"></script>

4. Create the multi-level context menu from a regular HTML unordered list as these:

<div class="hummingbird-popover-converter" id="myContenxtMenu">
  <li>Menu Item 1</li>
  <li>Menu Item 2</li>
  <li>-Menu Item 2.1</li>
  <li>--Menu Item 2.1.1</li>
  <li>--Menu Item 2.1.2</li>
  <li>--Menu Item 2.1.3</li>
  <li>-Menu Item 2.2</li>
  <li>--Menu Item 2.2.1</li>
  <li>--Menu Item 2.2.2</li>
  <li>--Menu Item 2.2.3</li>
  <li>Menu Item 3</li>
  <li>-Menu Item 3.1</li>
  <li>-Menu Item 3.2</li>
  <li>-Menu Item 3.3</li>

5. Add the data-id attribute to the target element where you want to attach the context menu to.

<div id="demo" data-id="myContenxtMenu">
  Content here

6. Initialize the plugin by calling the function on the element.


7. Destroy the context menu manually.


8. Event handlers which can be used to do something as the user click menu items.

$("#demo").on("hummingbirdPopover_action", function(e,data) {

  if (data.includes("value 1") || data.includes("value 2")) {
    // do something
  if (data == "value 3" || data == "value 4" || data == "value 5") {
    // do something





  • return the whole path of the selected option as an array


  • add data-id to pass custom content as JSON

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