How to add custom menu in menubar in mac with electron?

First, Electron is a framework for building cross-platform desktop applications using JavaScript, HTML, and CSS. Adding custom menus to the macOS menu bar in Electron can be achieved by utilizing the Electron Menu module.

Steps Overview:

1. Import the Menu Module
2. Create a Menu Template
3. Add Custom Items and Features
4. Apply the Menu Template to the Application

Implementation Details:

First, import the Menu module in the main process file (typically main.js or index.js):

javascript
const { Menu } = require('electron')

Next, define a menu template, which is an array where each element represents a menu item that can be a submenu or a specific action.

javascript
const menuTemplate = [
  {
    label: 'File',
    submenu: [
      { label: 'New', click: () => { console.log('New file') } },
      { label: 'Open', click: () => { console.log('Open file') } }
    ]
  },
  {
    label: 'Edit',
    submenu: [
      { label: 'Copy', role: 'copy' },
      { label: 'Paste', role: 'paste' }
    ]
  },
  {
    label: 'View',
    submenu: [
      { label: 'Reload', role: 'reload' },
      { label: 'Toggle Full Screen', role: 'togglefullscreen' }
    ]
  }
]

In this example, I created three primary menu items: 'File', 'Edit', and 'View', each with corresponding submenu items. For instance, under the 'File' menu, there are 'New' and 'Open' actions, and clicking these menu items triggers the corresponding functions.

Next, use the Menu.buildFromTemplate() method to create the menu from the template and set it as the application menu using Menu.setApplicationMenu().

javascript
const menu = Menu.buildFromTemplate(menuTemplate)
Menu.setApplicationMenu(menu)

Practical Application:

For example, if we are developing a text editor, users may need quick access to file operations, editing actions, and view settings in the menu bar. By using this method, we can conveniently add these features to the menu bar, enhancing user convenience and the overall application experience.

This covers the steps for adding custom menus to the macOS menu bar in Electron.