jQuery Enable Right-click Context Menu for Bootstrap

bootstrap-contextmenu is a small, lightweight, right-click context menu for jQuery/Bootstrap without all the unnecessary features. The minified version is only 554 bytes in size.

It also allows you to show other elements like div or iframe with right-click.

Must Read: A Simple Vue Context Menu Component Javascript Library

How to make use of it:

1. Include the jQuery Bootstrap Contextmenu plugin in your Bootstrap project.

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

<script src="jquery.context.min.js"></script>

2. Create a Bootstrap dropdown menu for the context menu.

<ul class="dropdown-menu" id="demo">
  <li><a href="#">Action 1</a></li>
  <li><a href="#">Action 2</a></li>
  <li><a href="#">Action 3</a></li>
</ul>

3. Configure the plugin to enable the “#demo” context menu inside the “#wrapper” container.

$('#wrapper').contextmenu('#demo', function(clicked, selected) {

  // callback function
  
});

See Also –

Custom Right-Click Context Menu With HTML and JavaScript
Simple To Use Context Menu Plugin for Angular | ng-simple-contextmenu
A JavaScript Library for Adding Context Menus to Any HTML Element | context-menu.js


See Demo And Download

Official Website(jochemstoel): Click Here

This superior jQuery/javascript plugin is developed by jochemstoel. For extra advanced usage, please go to the official website.

Related Posts

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

Nepali-Date-Picker-jQuery-Plugin

Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API….

bootstrap-5-dark-theme

Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…

Vertical-3-Dot-Context-Menu

Simple and Lightweight Vertical 3-Dot Context Menu

The 3-dot Context Menu allows for a simple and lightweight implementation to show 3 vertical dots allowing the user to click and show a menu. Below is…