09:40 7/6/26 JavaScript Context Menu Plugin
menu
Documentation keyboard_arrow_right Contextmenu
JavaScript Context Menu
Introducing the jSuites context menu, a dynamic JavaScript plugin designed to enrich web
applications by enabling custom right-click context menus on HTML elements. Perfectly
adaptable across different web frameworks, this tool is optimized for a smooth and consistent
user experience on all devices, including mobile. With its broad customization capabilities,
you can easily integrate submenus, icons, and specific event handlers to create a more
interactive and user-friendly interface. Key Features:
Framework Flexibility: Easily integrate with React, Angular, [Link] and other frameworks.
Mobile Optimization: Ensures a responsive and intuitive experience on mobile devices.
Extensive Customization: Offers various options, including custom events, submenus,
and icon inclusion, for a tailored application feel.
Versatile Implementation: This can be used as a standalone JavaScript plugin or as a
web component, providing flexibility in application development.
Documentation
Initialization Options
Property Description
items: Array of objects Array of item object descriptions.
onclick: function Global onclick event. function(instance, event)
Item options
[Link] 1/7
09:40 7/6/26 JavaScript Context Menu Plugin
Property Description
type: string Context menu item type: line | divisor | default
Context menu icon key. (Material icon key icon
icon: string
identification)
id: string HTML id property of the item DOM element
disabled: boolean The item is disabled
onclick: function(element: HTMLElement,
Specific onclick event for the element.
event: e) : void
A short description or instruction for the item.
shortcut: string
Normally a shortcut.
Show this text when the user mouse over the
tooltip: string
element
submenu: Array of objects Submenu items
Examples
Context Menu as a Web Component
Using this example, incorporate a custom context menu into your web application. This
implementation showcases setting up a context menu as a web component, allowing for
seamless integration and enhanced interactivity within your application.
right click inside the square to open the contextmenu
[Link] 2/7
09:40 7/6/26 JavaScript Context Menu Plugin
<html>
<script src="[Link]
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<jsuites-contextmenu id='contextmenu-webcomponent'>
<div onclick="alert('About is clicked')"><a>About</a>
<span>CTRL+A</span></div>
<div onclick="[Link]('[Link] to
Jspreadsheet Pro website</div>
<hr>
<div data-icon="save">Save</div>
<div>
<a>Submenus</a>
<span>►</span>
<div class="jcontextmenu" tabindex="900">
<div><a>Sub menu 1</a><span>Ctrl + X</span></div>
</div>
</div>
</jsuites-contextmenu>
<div aria-contextmenu-id="contextmenu-webcomponent" style="border:1px
solid grey;width:400px;height:300px;"></div>
<i class="small">right click inside the square to open the
contextmenu</i>
</html>
Context Menu with Simple JavaScript
Easily add a context menu to your web projects using only vanilla JavaScript for a lightweight
and customizable solution.
[Link] 3/7
09:40 7/6/26 JavaScript Context Menu Plugin
right click inside the square to open the contextmenu
[Link] 4/7
09:40 7/6/26 JavaScript Context Menu Plugin
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<div id='container' style='border:1px solid
grey;width:400px;height:300px;'></div>
<i class="small">right click inside the square to open the
contextmenu</i>
<div id='contextmenu'></div>
<script>
var contextMenu =
[Link]([Link]('contextmenu'), {
items:[
{
title:'Copy',
shortcut:'Ctrl + C',
onclick:function() {
alert('Copy');
},
tooltip: 'Method to copy the text',
},
{
type:'line'
},
{
title:'Visit the website',
onclick:function() {
[Link]('[Link]
}
},
{
title:'Google',
disabled: true,
onclick:function() {
[Link] 5/7
09:40 7/6/26 JavaScript Context Menu Plugin
alert('jSuites v2')
}
},
{
title:'About',
onclick:function() {
alert('jSuites v2')
}
},
],
onclick:function() {
[Link](false);
}
});
[Link]('container').addEventListener("contextmenu",
function(e) {
[Link](e);
[Link]();
});
</script>
Related Tools
LemonadeJS Context Menu - Reactive context menu component
Jspreadsheet CE Context Menu - Customize data grid right-click menus (free)
Jspreadsheet Pro Context Menu - Advanced spreadsheet context menu customization
(Pro)
[Link] 6/7
09:40 7/6/26 JavaScript Context Menu Plugin
[Link] 7/7