280f643862* docs: add `Menu` module tutorials * link API docs to new tutorials * removed unreferenced fiddles * add wording for new types * fix import sort errors * delete accelerator.md * fixes Co-authored-by: trop[bot] <37223003+trop[bot]@users.noreply.github.com> Co-authored-by: Erick Zhao <ezhao@slack-corp.com>
2.9 KiB
| title | description | slug | hide_title |
|---|---|---|---|
| Context Menu | Configure cross-platform native OS menus with the Menu API. | context-menu | true |
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.
Using the contextmenu event (renderer)
Alternatively, you can also listen to the contextmenu
event available on DOM elements in the renderer process and call the menu.popup function via IPC.
Tip
To learn more about IPC basics in Electron, see the Inter-Process Communication guide.
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.
const { BrowserWindow, Menu } = require('electron/main')
const menu = Menu.buildFromTemplate([{ role: 'editMenu' }])
const win = new BrowserWindow()
win.webContents.on('context-menu', (_event, params) => {
// Whether the context is editable.
if (params.isEditable) {
menu.popup({
// highlight-next-line
frame: params.frame
})
}
})