options Object (可选)
- window BaseWindow (optional) - Default is the focused window.
- frame WebFrameMain (optional) - Provide the relevant frame if you want certain OS-level features such as Writing Tools on macOS to function correctly. Typically, this should be params.frame from the context-menu event on a WebContents, or the focusedFrame property of a WebContents.
- x number (可选) - 默认为当前鼠标的位置。如果指定了y，则该选项必选。
- y number (可选) - 默认为当前鼠标的位置。如果指定了x，则该选项必选。
- positioningItem number (可选) macOS - 在指定鼠标光标下定位的菜单项的索引。默认值为 -1。
- sourceType string (optional) Windows Linux - This should map to the menuSourceType provided by the context-menu event. It is not recommended to set this value manually, only provide values you receive from other APIs or leave it undefined. Can be none, mouse, keyboard, touch, touchMenu, longPress, longTap, touchHandle, stylus, adjustSelection, or adjustSelectionReset.
- callback Function (optional) - 会在菜单关闭后被调用.

Pops up this menu as a context menu in the BaseWindow.

`menu.closePopup([window])`

window BaseWindow (optional) - Default is the focused window.

Closes the context menu in the window.

`menu.append(menuItem)`

menuItem MenuItem

将 menuItem 追加到菜单。

`menu.getMenuItemById(id)`

id 字符串

返回具有指定id项的MenuItem | null

`menu.insert(pos, menuItem)`

pos Integer
menuItem MenuItem

将 menuItem 插入菜单的 pos 位置。

实例事件

使用 new Menu 创建对象或通过 Menu.buildFromTemplate返回对象均会触发下列事件：

[!NOTE] Some events are only available on specific operating systems and are labeled as such.

event Event

调用menu.popup()事件时触发该事件。

event Event

手动关闭弹出，或使用 menu.closePopup()方法关闭弹出时，触发该事件。

实例属性

menu 对象还具有以下属性:

`menu.items`

包含菜单项的 MenuItem [] 数组。

Each Menu consists of multiple MenuItems and each MenuItem can have a submenu.

示例

使用简单模板API创建 application menu 的示例代码：

const { app, Menu } = require('electron')

const isMac = process.platform === 'darwin'

const template = [
  // { role: 'appMenu' }
  ...(isMac
    ? [{
        label: app.name,
        submenu: [
          { role: 'about' },
          { type: 'separator' },
          { role: 'services' },
          { type: 'separator' },
          { role: 'hide' },
          { role: 'hideOthers' },
          { role: 'unhide' },
          { type: 'separator' },
          { role: 'quit' }
        ]
      }]
    : []),
  // { role: 'fileMenu' }
  {
    label: 'File',
    submenu: [
      isMac ? { role: 'close' } : { role: 'quit' }
    ]
  },
  // { role: 'editMenu' }
  {
    label: 'Edit',
    submenu: [
      { role: 'undo' },
      { role: 'redo' },
      { type: 'separator' },
      { role: 'cut' },
      { role: 'copy' },
      { role: 'paste' },
      ...(isMac
        ? [
            { role: 'pasteAndMatchStyle' },
            { role: 'delete' },
            { role: 'selectAll' },
            { type: 'separator' },
            {
              label: 'Speech',
              submenu: [
                { role: 'startSpeaking' },
                { role: 'stopSpeaking' }
              ]
            }
          ]
        : [
            { role: 'delete' },
            { type: 'separator' },
            { role: 'selectAll' }
          ])
    ]
  },
  // { role: 'viewMenu' }
  {
    label: 'View',
    submenu: [
      { role: 'reload' },
      { role: 'forceReload' },
      { role: 'toggleDevTools' },
      { type: 'separator' },
      { role: 'resetZoom' },
      { role: 'zoomIn' },
      { role: 'zoomOut' },
      { type: 'separator' },
      { role: 'togglefullscreen' }
    ]
  },
  // { role: 'windowMenu' }
  {
    label: 'Window',
    submenu: [
      { role: 'minimize' },
      { role: 'zoom' },
      ...(isMac
        ? [
            { type: 'separator' },
            { role: 'front' },
            { type: 'separator' },
            { role: 'window' }
          ]
        : [
            { role: 'close' }
          ])
    ]
  },
  {
    role: 'help',
    submenu: [
      {
        label: 'Learn More',
        click: async () => {
          const { shell } = require('electron')
          await shell.openExternal('https://electronjs.org')
        }
      }
    ]
  }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

渲染进程

要创建由渲染器启动的菜单，请通过 IPC 发送所需的信息到主过程，并让主过程代替渲染器显示菜单。

以下是用户右键单击页面时显示菜单的示例：

// renderer
window.addEventListener('contextmenu', (e) => {
  e.preventDefault()
  ipcRenderer.send('show-context-menu')
})

ipcRenderer.on('context-menu-command', (e, command) => {
  // ...
})

// main
ipcMain.on('show-context-menu', (event) => {
  const template = [
    {
      label: 'Menu Item 1',
      click: () => { event.sender.send('context-menu-command', 'menu-item-1') }
    },
    { type: 'separator' },
    { label: 'Menu Item 2', type: 'checkbox', checked: true }
  ]
  const menu = Menu.buildFromTemplate(template)
  menu.popup({ window: BrowserWindow.fromWebContents(event.sender) })
})

MacOS中应用菜单注意事项

macOS 相比于 Windows 和 Linux 有着完全不同的应用程序菜单。以下是一些有关使应用菜单更像原生应用菜单的注意事项。

标准菜单

On macOS there are many system-defined standard menus, like the Services and Windows menus. 让你的菜单更像MacOS标准菜单，只需设置菜单role值为如下示之一，Electron便会自动认出并设置成标准菜单，：

window
help
services

标准菜单项操作

macOS 已经为某些菜单项提供了标准操作, 如 about xxx、Hide xxx 和 Hide Others。若要将菜单项的操作设置为标准操作, 应设置菜单项的 role 属性。

主菜单的名称

在 macOS 中应用程序菜单的第一个项目的标签总是你的应用程序的名字, 无论你设置什么标签。如要更改它, 请修改应用程序包的 Info. plist 文件。 See About Information Property List Files for more information.

Menu sublabels, or subtitles, can be added to menu items using the sublabel option. Below is an example based on the renderer example above:

// main
ipcMain.on('show-context-menu', (event) => {
  const template = [
    {
      label: 'Menu Item 1',
      sublabel: 'Subtitle 1',
      click: () => { event.sender.send('context-menu-command', 'menu-item-1') }
    },
    { type: 'separator' },
    { label: 'Menu Item 2', sublabel: 'Subtitle 2', type: 'checkbox', checked: true }
  ]
  const menu = Menu.buildFromTemplate(template)
  menu.popup({ window: BrowserWindow.fromWebContents(event.sender) })
})

设置特定浏览器窗口的菜单 (_ Linux _ _ Windows _)

The setMenu method of browser windows can set the menu of certain browser windows.

菜单项位置

You can make use of before, after, beforeGroupContaining, afterGroupContaining and id to control how the item will be placed when building a menu with Menu.buildFromTemplate.

before - Inserts this item before the item with the specified id. 如果引用值不存在，那么该菜单项会插在这个菜单的尾部。这还意味着，菜单项应该被放置在与引用项相同的组中。
after - Inserts this item after the item with the specified id. 如果引用值不存在，那么该菜单项会插在这个菜单的尾部。这还意味着，菜单项应该被放置在与引用项相同的组中。
beforeGroupContaining - Provides a means for a single context menu to declare the placement of their containing group before the containing group of the item with the specified id.
afterGroupContaining - Provides a means for a single context menu to declare the placement of their containing group after the containing group of the item with the specified id.

By default, items will be inserted in the order they exist in the template unless one of the specified positioning keywords is used.

示例

Template:

[
  { id: '1', label: 'one' },
  { id: '2', label: 'two' },
  { id: '3', label: 'three' },
  { id: '4', label: 'four' }
]

Menu:

- 1
- 2
- 3
- 4

Template:

[
  { id: '1', label: 'one' },
  { type: 'separator' },
  { id: '3', label: 'three', beforeGroupContaining: ['1'] },
  { id: '4', label: 'four', afterGroupContaining: ['2'] },
  { type: 'separator' },
  { id: '2', label: 'two' }
]

Menu:

- 3
- 4
- ---
- 1
- ---
- 2

Template:

[
  { id: '1', label: 'one', after: ['3'] },
  { id: '2', label: 'two', before: ['1'] },
  { id: '3', label: 'three' }
]

Menu:

- ---
- 3
- 2
- 1

Menu

菜单

`new Menu()`

静态方法

`Menu.setApplicationMenu(menu)`

`Menu.getApplicationMenu()`

`Menu.sendActionToFirstResponder(action)` macOS

`Menu.buildFromTemplate(template)`

实例方法

`menu.popup([options])`

`menu.closePopup([window])`

`menu.append(menuItem)`

`menu.getMenuItemById(id)`

`menu.insert(pos, menuItem)`

实例事件

事件: 'menu-will-show'

事件: 'menu-will-close'

实例属性

`menu.items`

示例

渲染进程

MacOS中应用菜单注意事项

标准菜单

标准菜单项操作

主菜单的名称

Menu Sublabels

设置特定浏览器窗口的菜单 (_ Linux _ _ Windows _)

菜单项位置

示例

菜单​

new Menu()​

静态方法​

Menu.setApplicationMenu(menu)​

Menu.getApplicationMenu()​

Menu.sendActionToFirstResponder(action) macOS​

Menu.buildFromTemplate(template)​

实例方法​

menu.popup([options])​

menu.closePopup([window])​

menu.append(menuItem)​

menu.getMenuItemById(id)​

menu.insert(pos, menuItem)​

实例事件​

事件: 'menu-will-show'​

事件: 'menu-will-close'​

实例属性​

menu.items​

示例​

渲染进程​

MacOS中应用菜单注意事项​

标准菜单​

标准菜单项操作​

主菜单的名称​

Menu Sublabels​

设置特定浏览器窗口的菜单 (_ Linux _ _ Windows _)​

菜单项位置​

示例​

菜单

`new Menu()`

静态方法

`Menu.setApplicationMenu(menu)`

`Menu.getApplicationMenu()`

`Menu.sendActionToFirstResponder(action)` macOS

`Menu.buildFromTemplate(template)`

实例方法

`menu.popup([options])`

`menu.closePopup([window])`

`menu.append(menuItem)`

`menu.getMenuItemById(id)`

`menu.insert(pos, menuItem)`

实例事件

事件: 'menu-will-show'

事件: 'menu-will-close'

实例属性

`menu.items`

示例

渲染进程

MacOS中应用菜单注意事项

标准菜单

标准菜单项操作

主菜单的名称

Menu Sublabels

设置特定浏览器窗口的菜单 (_ Linux _ _ Windows _)

菜单项位置

示例