同样在 Windows 和 Linux 上，您可以在顶层项目名称中使用 & 来指示哪个字母应该获得生成的快捷键。例如，对文件菜单使用 &File 将产生一个生成的 Alt-F 快捷键，用于打开相关菜单。然后，按钮标签中指示的字符会带有下划线，并且 & 字符不会显示在按钮标签上。

为了在项目名称中转义 & 字符，请添加一个前导的 &。例如，&&File 将导致在按钮标签上显示 &File。

传递 null 将抑制默认菜单。在 Windows 和 Linux 上，这还会产生从窗口中删除菜单栏的额外效果。

注意： 如果应用程序未设置菜单，则会自动创建默认菜单。它包含诸如 File、Edit、View、Window 和 Help 之类的标准项目。

`Menu.getApplicationMenu()`

返回 Menu | null - 如果已设置应用程序菜单，则返回该菜单；如果未设置，则返回 null。

注意： 返回的 Menu 实例不支持动态添加或删除菜单项。实例属性仍然可以动态修改。

`Menu.sendActionToFirstResponder(action)` macOS

action 字符串

将 action 发送到应用程序的第一个响应者。这用于模拟默认的 macOS 菜单行为。通常，您会使用 role 属性的 MenuItem。

有关 macOS 原生操作的更多信息，请参阅 macOS Cocoa 事件处理指南。

`Menu.buildFromTemplate(template)`

template (MenuItemConstructorOptions | MenuItem)[]

返回 Menu

通常，template 是一个 options 数组，用于构造 MenuItem。其用法可以参考上面。

您还可以将其他字段附加到 template 的元素，它们将成为构造的菜单项的属性。

实例方法

menu 对象具有以下实例方法

`menu.popup([options])`

options 对象（可选）
- window BaseWindow (可选) - 默认值为焦点窗口。
- x 数字（可选） - 默认值为当前鼠标光标位置。如果声明了 y，则必须声明。
- y 数字（可选） - 默认值为当前鼠标光标位置。如果声明了 x，则必须声明。
- positioningItem 数字（可选） macOS - 要在指定坐标下的鼠标光标下定位的菜单项的索引。默认值为 -1。
- sourceType 字符串（可选）Windows Linux - 这应该映射到 context-menu 事件提供的 menuSourceType。不建议手动设置此值，仅提供您从其他 API 收到的值或将其保留为 undefined。可以是 none、mouse、keyboard、touch、touchMenu、longPress、longTap、touchHandle、stylus、adjustSelection 或 adjustSelectionReset。
- callback 函数（可选） - 菜单关闭时调用。

将此菜单作为 BaseWindow 中的上下文菜单弹出。

`menu.closePopup([window])`

window BaseWindow (可选) - 默认值为焦点窗口。

关闭 window 中的上下文菜单。

`menu.append(menuItem)`

menuItem MenuItem

将 menuItem 附加到菜单。

`menu.getMenuItemById(id)`

id 字符串

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

`menu.insert(pos, menuItem)`

pos 整数
menuItem MenuItem

将 menuItem 插入到菜单的 pos 位置。

实例事件

使用 new Menu 创建或由 Menu.buildFromTemplate 返回的对象会发出以下事件

注意： 某些事件仅在特定操作系统上可用，并被标记为如此。

event 事件

当调用 menu.popup() 时发出。

event 事件

当弹出窗口手动关闭或使用 menu.closePopup() 关闭时发出。

实例属性

menu 对象还具有以下属性

`menu.items`

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

每个 Menu 由多个 MenuItem 组成，并且每个 MenuItem 可以具有一个子菜单。

示例

以下是使用简单的模板 API 创建应用程序菜单的示例

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://electron.js.cn')
        }
      }
    ]
  }
]

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 的应用程序菜单风格与 Windows 和 Linux 完全不同。以下是一些关于如何使你的应用程序菜单更像原生菜单的注意事项。

标准菜单

在 macOS 上，有许多系统定义的标准菜单，例如 Services 和 Windows 菜单。要使你的菜单成为标准菜单，你应该将你的菜单的 role 设置为以下值之一，Electron 将识别它们并使其成为标准菜单。

window
help
services

macOS 为某些菜单项提供了标准操作，例如 关于 xxx、隐藏 xxx 和 隐藏其他。要将菜单项的操作设置为标准操作，你应该设置菜单项的 role 属性。

主菜单名称

在 macOS 上，应用程序菜单的第一个项的标签始终是你的应用程序的名称，无论你设置什么标签。要更改它，请修改你的应用程序捆绑包的 Info.plist 文件。有关更多信息，请参阅关于信息属性列表文件。

浏览器窗口的 setMenu 方法可以设置某些浏览器窗口的菜单。

你可以使用 before、after、beforeGroupContaining、afterGroupContaining 和 id 来控制在使用 Menu.buildFromTemplate 构建菜单时如何放置该项。

before - 将此项插入到具有指定 ID 的项之前。如果引用的项不存在，则该项将插入到菜单的末尾。也意味着有问题的菜单项应放置在与该项相同的“组”中。
after - 将此项插入到具有指定 ID 的项之后。如果引用的项不存在，则该项将插入到菜单的末尾。也意味着有问题的菜单项应放置在与该项相同的“组”中。
beforeGroupContaining - 提供了一种方法，使单个上下文菜单可以声明其包含组的位置在具有指定 ID 的项的包含组之前。
afterGroupContaining - 提供了一种方法，使单个上下文菜单可以声明其包含组的位置在具有指定 ID 的项的包含组之后。

默认情况下，除非使用了指定的定位关键字之一，否则项将按照它们在模板中存在的顺序插入。

示例

模板

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

- 1
- 2
- 3
- 4

模板

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

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

模板

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

- ---
- 3
- 2
- 1

Menu

类: 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 应用程序菜单注意事项

标准菜单

标准菜单项操作

主菜单名称

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

菜单项位置

示例

类: 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 应用程序菜单注意事项​

标准菜单​

标准菜单项操作​

主菜单名称​

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

菜单项位置​

示例​

类: 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 应用程序菜单注意事项

标准菜单

标准菜单项操作

主菜单名称

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

菜单项位置

示例