Context Menu

Context menus are pop-up menus that appear when right-clicking (or pressing a shortcut such as Shift + F10 on Windows) somewhere in an app's interface.

No context menu will appear by default in Electron. However, context menus can be created by using the menu.popup function on an instance of the Menu class. You will need to listen for specific context menu events and set up the trigger for menu.popup manually.

There are two ways of listening for context menu events in Electron: either via the main process through webContents or in the renderer process via the contextmenu web event.

Using the `context-menu` event (main)

Whenever a right-click is detected within the bounds of a specific WebContents instance, a context-menu event is triggered. The params object passed to the listener provides an extensive list of attributes to distinguish which type of element is receiving the event.

For example, if you want to provide a context menu for links, check for the linkURL parameter. If you want to check for editable elements such as <textarea/>, check for the isEditable parameter.

docs/fiddles/menus/context-menu/web-contents (38.4.0) UTF-8">

<metahttp-equiv="Content-Security-Policy"content="default-src 'self'; script-src 'self'">
<title>Context Menu Demo</title>
</head>
<body>
<h1>Context Menu Demo</h1>
<textarea></textarea>
</body>
</html>

Additional macOS menu items (e.g. Writing Tools)

On macOS, the Writing Tools, AutoFill, and Services menu items are disabled by default for context menus in Electron. To enable these features, pass the WebFrameMain associated to the target webContents to the frame parameter in menu.popup.

Associating a frame to the context menu

const{BrowserWindow,Menu}=require('electron/main')

const menu =Menu.buildFromTemplate([{role:'editMenu'}])
const win =newBrowserWindow()
win.webContents.on('context-menu',(_event, params)=>{
// Whether the context is editable.
if(params.isEditable){
 menu.popup({
frame: params.frame
})
}
})

Context Menu

Using the context-menu event (main)​

Using the contextmenu event (renderer)​

Additional macOS menu items (e.g. Writing Tools)​

Using the `context-menu` event (main)

Using the `contextmenu` event (renderer)

Additional macOS menu items (e.g. Writing Tools)