Context Menu Plugin For Bootstrap - jQuery Hummingbird Popover

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.

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

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

  • Publication date: 25.05.2018
  • Source