Application examples for this series of articles have been published GitHub: electron-api-demos-Zh_CN Clone or run it after downloading. Welcome to Star.
The Menu and MenuItem modules can be used to create custom local menus.
There are two menus: the application (top) menu and the context (right-click) menu.
Open in the browser Complete API documentation .
Create Application Menu
Support: Win, macOS, Linux | Process: Main
Using Menu and MenuItem modules, you can customize your application menu. If no menu is set, Electron will default to generate a minimal menu for your application.
This application uses the following code to set the application menu. If you click on the View option in the application menu and then click on the Application Menu Demo, an information box will be displayed.
Main process
const electron = require('electron') const BrowserWindow = electron.BrowserWindow const Menu = electron.Menu const app = electron.app let template = [{ label: 'edit', submenu: [{ label: 'Revoke', accelerator: 'CmdOrCtrl+Z', role: 'undo' }, { label: 'redo', accelerator: 'Shift+CmdOrCtrl+Z', role: 'redo' }, { type: 'separator' }, { label: 'shear', accelerator: 'CmdOrCtrl+X', role: 'cut' }, { label: 'copy', accelerator: 'CmdOrCtrl+C', role: 'copy' }, { label: 'paste', accelerator: 'CmdOrCtrl+V', role: 'paste' }, { label: 'All election', accelerator: 'CmdOrCtrl+A', role: 'selectall' }] }, { label: 'See', submenu: [{ label: 'heavy load', accelerator: 'CmdOrCtrl+R', click: function (item, focusedWindow) { if (focusedWindow) { // After overloading, refresh and close all secondary forms if (focusedWindow.id === 1) { BrowserWindow.getAllWindows().forEach(function (win) { if (win.id > 1) { win.close() } }) } focusedWindow.reload() } } }, { label: 'Toggle full screen', accelerator: (function () { if (process.platform === 'darwin') { return 'Ctrl+Command+F' } else { return 'F11' } })(), click: function (item, focusedWindow) { if (focusedWindow) { focusedWindow.setFullScreen(!focusedWindow.isFullScreen()) } } }, { label: 'Switching Developer Tools', accelerator: (function () { if (process.platform === 'darwin') { return 'Alt+Command+I' } else { return 'Ctrl+Shift+I' } })(), click: function (item, focusedWindow) { if (focusedWindow) { focusedWindow.toggleDevTools() } } }, { type: 'separator' }, { label: 'Application menu demonstration', click: function (item, focusedWindow) { if (focusedWindow) { const options = { type: 'info', title: 'Application menu demonstration', buttons: ['Well'], message: 'This demonstration is used for "menu" Part, Shows how to create clickable menu items in the application menu.' } electron.dialog.showMessageBox(focusedWindow, options, function () {}) } } }] }, { label: 'window', role: 'window', submenu: [{ label: 'minimize', accelerator: 'CmdOrCtrl+M', role: 'minimize' }, { label: 'Close', accelerator: 'CmdOrCtrl+W', role: 'close' }, { type: 'separator' }, { label: 'Open the window again', accelerator: 'CmdOrCtrl+Shift+T', enabled: false, key: 'reopenMenuItem', click: function () { app.emit('activate') } }] }, { label: 'Help', role: 'help', submenu: [{ label: 'Learn more', click: function () { electron.shell.openExternal('http://electron.atom.io') } }] }] function addUpdateMenuItems (items, position) { if (process.mas) return const version = electron.app.getVersion() let updateItems = [{ label: `Version $`, enabled: false }, { label: 'Checking for updates', enabled: false, key: 'checkingForUpdate' }, { label: 'Check update', visible: false, key: 'checkForUpdate', click: function () { require('electron').autoUpdater.checkForUpdates() } }, { label: 'Restart and install updates', enabled: true, visible: false, key: 'restartToUpdate', click: function () { require('electron').autoUpdater.quitAndInstall() } }] items.splice.apply(items, [position, 0].concat(updateItems)) } function findReopenMenuItem () { const menu = Menu.getApplicationMenu() if (!menu) return let reopenMenuItem menu.items.forEach(function (item) { if (item.submenu) { item.submenu.items.forEach(function (item) { if (item.key === 'reopenMenuItem') { reopenMenuItem = item } }) } }) return reopenMenuItem } if (process.platform === 'darwin') { const name = electron.app.getName() template.unshift({ label: name, submenu: [{ label: `about $`, role: 'about' }, { type: 'separator' }, { label: 'service', role: 'services', submenu: [] }, { type: 'separator' }, { label: `hide $`, accelerator: 'Command+H', role: 'hide' }, { label: 'Hide other', accelerator: 'Command+Alt+H', role: 'hideothers' }, { label: 'Show all', role: 'unhide' }, { type: 'separator' }, { label: 'Sign out', accelerator: 'Command+Q', click: function () { app.quit() } }] }) // Window menu. template[3].submenu.push({ type: 'separator' }, { label: 'Prefix all', role: 'front' }) addUpdateMenuItems(template[0].submenu, 1) } if (process.platform === 'win32') { const helpMenu = template[template.length - 1].submenu addUpdateMenuItems(helpMenu, 0) } app.on('ready', function () { const menu = Menu.buildFromTemplate(template) Menu.setApplicationMenu(menu) }) app.on('browser-window-created', function () { let reopenMenuItem = findReopenMenuItem() if (reopenMenuItem) reopenMenuItem.enabled = false }) app.on('window-all-closed', function () { let reopenMenuItem = findReopenMenuItem() if (reopenMenuItem) reopenMenuItem.enabled = true })
Advanced skills
Understand the differences in operating system menus.
When designing applications for multiple operating systems, it is important to note the different conventions of application menus on each operating system.
For example, on Windows, accelerator settings are different as well as naming conventions, such as Settings or Preferences. Here are resources for learning OS-specific standards:
Create context menu
Support: Win, macOS, Linux | Process: Main
You can use the Menu and MenuItem modules to create a context or right-click menu. You can right-click anywhere in the application or click the sample button to view the sample context menu.
In this example, we use the ipcRenderer module to show the context menu when it is explicitly invoked from the renderer process.
For all available properties, see Context Menu Event Document .
Main process
const electron = require('electron') const BrowserWindow = electron.BrowserWindow const Menu = electron.Menu const MenuItem = electron.MenuItem const ipc = electron.ipcMain const app = electron.app const menu = new Menu() menu.append(new MenuItem({ label: 'Hello' })) menu.append(new MenuItem({ type: 'separator' })) menu.append(new MenuItem({ label: 'Electron', type: 'checkbox', checked: true })) app.on('browser-window-created', function (event, win) { win.webContents.on('context-menu', function (e, params) { menu.popup(win, params.x, params.y) }) }) ipc.on('show-context-menu', function (event) { const win = BrowserWindow.fromWebContents(event.sender) menu.popup(win) })
Render process
const ipc = require('electron').ipcRenderer // Tell the main process to display the menu when clicking the sample button const contextMenuBtn = document.getElementById('context-menu') contextMenuBtn.addEventListener('click', function () { ipc.send('show-context-menu') })