---
title: "JavaScript Context Menu Plugin"
description: "Easily create custom right-click context menus in web applications with our JavaScript context menu component. This tool provides extensive customization, from submenus to icons, catering to unique application requirements and enhancing user interaction."
source: https://jsuites.net/docs/contextmenu
---
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, Vue.js 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
| Property | Description |
|------------------------------------------------------------|-----------------------------------------------------------------------|
| `type: string` | Context menu item type: line \| divisor \| default |
| `icon: string` | Context menu icon key. (Material icon key icon identification) |
| `id: string` | HTML id property of the item DOM element |
| `disabled: boolean` | The item is disabled |
| `onclick: function(element: HTMLElement, event: e) : void` | Specific onclick event for the element. |
| `shortcut: string` | A short description or instruction for the item. Normally a shortcut. |
| `tooltip: string` | Show this text when the user mouse over the 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.
```html
right click inside the square to open the contextmenu
```
```jsx
import { Contextmenu } from 'jsuites/react'
import { useRef, useEffect } from 'react'
import 'jsuites/dist/jsuites.css'
function App() {
const contextmenu = useRef(null);
const container = useRef(null);
useEffect(() => {
if (container.current) {
container.current.addEventListener("contextmenu", function (e) {
contextmenu.current.open(e);
e.preventDefault();
});
}
}, [])
let style = { width: "400px", height: "300px", border: "1px solid grey" };
return (
);
}
export default App;
```
```vue
```
### Context Menu with Simple JavaScript
Easily add a context menu to your web projects using only vanilla JavaScript for a lightweight and customizable solution.
```html
right click inside the square to open the contextmenu
```
```jsx
import { Contextmenu } from 'jsuites/react'
import { useRef, useEffect } from 'react'
import 'jsuites/dist/jsuites.css'
function App() {
const contextmenu = useRef(null);
const container = useRef(null);
useEffect(() => {
if (container.current) {
container.current.addEventListener("contextmenu", function (e) {
contextmenu.current.open(e);
e.preventDefault();
});
}
}, [])
let style = { width: "400px", height: "300px", border: "1px solid grey" };
return (
);
}
export default App;
```
```vue
```
## Related Tools
- [LemonadeJS Context Menu](https://lemonadejs.com/docs/plugins/context-menu) - Reactive context menu component
- [Jspreadsheet CE Context Menu](https://jspreadsheet.com/docs/ce/contextmenu) - Customize data grid right-click menus (free)
- [Jspreadsheet Pro Context Menu](https://jspreadsheet.com/docs/contextmenu) - Advanced spreadsheet context menu customization (Pro)