Victoria Baker
Senior developer
Plugin initialization
Context menu initialization optionsUsing data attributes
Add data-toggle="context" to any element that needs a custom context menu. And point data-target attribute to your custom context menu.
<div data-toggle="context" data-target=".context-menu"></div>
<div class="context-menu">
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
Using Javascript
Also content menu can be initialized via JavaScript call. In this case data attributes are not required, target can be set in plugin configuration.
$('.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
},
scopes: 'tbody > tr'
});
Content attachment
Card and content elements attachmentCard attachment
Current example demonstrates context menu attached to the whole card. Add
data-toggle="context" to the card and point data-target attribute to the menu.
Element attachment
Current example demonstrates context menu attached to some element only instead of full card. Right click on current
card title to see it in action
Inline attachment
Also context menu can be attached to the link or any other content elements like headings, paragraphs, span's, lists, labels, form components, buttons, button groups etc.
Exclude elements
Current example demonstrates context menu attached to the card content, excluding
<code>...</code> phrase tag. Try to right click on the code block.
Table attachment
Example with context menu attached to the whole table.
| # | Description | Date | Actions |
|---|---|---|---|
| 1 | Cozy sphinx waves quart jug of bad milk. | July 13, 2014 | |
| 2 | Few quips galvanized the mock jury box. | July 14, 2014 | |
| 3 | Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph. | July 15, 2014 |
Row attachment
Example with context menu attached to the table row. Attached to the first row.
| # | Description | Date | Actions |
|---|---|---|---|
| 1 | Cozy sphinx waves quart jug of bad milk. | July 13, 2014 | |
| 2 | Few quips galvanized the mock jury box. | July 14, 2014 | |
| 3 | Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph. | July 15, 2014 |
Cell attachment
Example with context menu attached to the table cell only. Attached to cells with links.
| # | Description | Date | Actions |
|---|---|---|---|
| 1 | Cozy sphinx waves quart jug of bad milk. | July 13, 2014 | |
| 2 | Few quips galvanized the mock jury box. | July 14, 2014 | |
| 3 | Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph. | July 15, 2014 |
Table content attachment
Example with context menu attached to the table content. Attached to action icons.
| # | Description | Date | Actions |
|---|---|---|---|
| 1 | Cozy sphinx waves quart jug of bad milk. | July 13, 2014 | |
| 2 | Few quips galvanized the mock jury box. | July 14, 2014 | |
| 3 | Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph. | July 15, 2014 |
Context menu options
Dropdown menu options and colorsDropdown submenu
Dropdown options
Since context dropdown menu supports default Bootstrap
dropdown-menu markup, any existing menu options can be used: disabled items, icons, borders, dividers etc.
Dynamic replacement
Current example demonstrates context menu, which contains an item, modified dynamically using
before: function () {...} plugin function.
Name on selection
Current example demonstrates context menu with function that shows menu name on item selection using
onItem: function () {...} plugin function.
Menu sizing
Context menus support all optional styles available for dropdowns - colors, sizes, headers, dividers, icons, badges, checkboxes etc. To use, add single or multiple optional classes to dropdown elements.
Solid color
Besides custom state colors, context dropdown menu supports predefined and custom solid background colors. Just add
.bg-* class to the existing context menu.
Plugin events
Context dropdown menu eventsonShow event
Current example demonstrates context menu with show.bs.contextevent. This event fires immediately when the context dropdown menu is opened.
$('#myMenu').on('show.bs.context',function () {
// do something...
});
onShown event
Current example demonstrates context menu with shown.bs.contextevent. This event is fired when the dropdown has been made visible to the user.
$('#myMenu').on('shown.bs.context',function () {
// do something...
});
onHide event
Current example demonstrates context menu with hide.bs.contextevent. This event is fired immediately when the hide instance method has been called.
$('#myMenu').on('hide.bs.context',function () {
// do something...
});
onHidden event
Current example demonstrates context menu with hidden.bs.contextevent. This event is fired when the dropdown has finished being hidden from the user.
$('#myMenu').on('hidden.bs.context',function () {
// do something...
});