PHPackages                             intelogie/bootstrap-contexmenu - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. intelogie/bootstrap-contexmenu

ActiveLibrary[Utility & Helpers](/categories/utility)

intelogie/bootstrap-contexmenu
==============================

Bootstrap context menu

055HTML

Since Jul 19Pushed 9y ago1 watchersCompare

[ Source](https://github.com/INTELOGIE/bootstrap-contextmenu)[ Packagist](https://packagist.org/packages/intelogie/bootstrap-contexmenu)[ RSS](/packages/intelogie-bootstrap-contexmenu/feed)WikiDiscussions master Synced 2d ago

READMEChangelogDependenciesVersions (1)Used By (0)

Bootstrap Context Menu
======================

[](#bootstrap-context-menu)

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

See a \[demo page\] \[id\]. \[id\]:

Installation
------------

[](#installation)

`bower install bootstrap-contextmenu`

Note: Requires bootstrap.css

Usage
-----

[](#usage)

### Via data attributes

[](#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.

``

### Via Javascript

[](#via-javascript)

Call the context menu via JavaScript:

```
$('.context').contextmenu({
  target:'#context-menu',
  before: function(e,context) {
    // execute code before context menu if shown
  },
  onItem: function(context,e) {
    // execute on menu item selection
  }
})
```

### Options

[](#options)

`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, $(e.target) is the item element.

`scopes` - DOM selector for dynamically added context elements. See [issue](https://github.com/sydcanem/bootstrap-contextmenu/issues/56).

### Events

[](#events)

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

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

Sample

```
$('#myMenu').on('show.bs.context',function () {
  // do something...
});
```

Example
-------

[](#example)

Activate and specify selector for context menu

```
$('#main').contextmenu({'target':'#context-menu'});
```

Activate within a div, but not on spans

```
$('#main').contextmenu({
  target: '#context-menu2',
  before: function (e, element, target) {
      e.preventDefault();
      if (e.target.tagName == 'SPAN') {
          e.preventDefault();
          this.closemenu();
          return false;
      }
      return true;
  }
});
```

Modify the menu dynamically

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

Show menu name on selection

```
$('#main').contextmenu({
  onItem: function(context, e) {
    alert($(e.target).text());
  }
});
```

### Nice to have features:

[](#nice-to-have-features)

- Close and open animations
- Keyboard shortcuts for menus

### License

[](#license)

MIT

###  Health Score

22

—

LowBetter than 21% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity8

Limited adoption so far

Community16

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 72% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/8cd960536c07e255b2e6f7e55c03c6d09274b215ccceaccc38926ffe03e098a7?d=identicon)[bgauthier](/maintainers/bgauthier)

---

Top Contributors

[![sydcanem](https://avatars.githubusercontent.com/u/646857?v=4)](https://github.com/sydcanem "sydcanem (54 commits)")[![ninio](https://avatars.githubusercontent.com/u/1941633?v=4)](https://github.com/ninio "ninio (5 commits)")[![sinetbot](https://avatars.githubusercontent.com/u/18731101?v=4)](https://github.com/sinetbot "sinetbot (5 commits)")[![jhubble](https://avatars.githubusercontent.com/u/1062951?v=4)](https://github.com/jhubble "jhubble (2 commits)")[![bgauthier](https://avatars.githubusercontent.com/u/1789355?v=4)](https://github.com/bgauthier "bgauthier (2 commits)")[![msurguy](https://avatars.githubusercontent.com/u/585833?v=4)](https://github.com/msurguy "msurguy (1 commits)")[![NAndreasson](https://avatars.githubusercontent.com/u/611104?v=4)](https://github.com/NAndreasson "NAndreasson (1 commits)")[![treet](https://avatars.githubusercontent.com/u/1241773?v=4)](https://github.com/treet "treet (1 commits)")[![cvrebert](https://avatars.githubusercontent.com/u/419884?v=4)](https://github.com/cvrebert "cvrebert (1 commits)")[![dariusclay](https://avatars.githubusercontent.com/u/3975431?v=4)](https://github.com/dariusclay "dariusclay (1 commits)")[![davebenvenuti](https://avatars.githubusercontent.com/u/302063?v=4)](https://github.com/davebenvenuti "davebenvenuti (1 commits)")[![dsherret](https://avatars.githubusercontent.com/u/1609021?v=4)](https://github.com/dsherret "dsherret (1 commits)")

### Embed Badge

![Health badge](/badges/intelogie-bootstrap-contexmenu/health.svg)

```
[![Health](https://phpackages.com/badges/intelogie-bootstrap-contexmenu/health.svg)](https://phpackages.com/packages/intelogie-bootstrap-contexmenu)
```

###  Alternatives

[matthieumastadenis/couleur

A modern PHP 8.1+ color library, compatible with CSS Color Module Level 4

3146.2k4](/packages/matthieumastadenis-couleur)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)