Home » Electron JS

How to add or customize menus in an Electron JS Application?

Electron JS | Add or Customize Menus: In this tutorial, we are going to learn about adding or customizing menus in an Electron JS Application.
Submitted by Godwill Tetah, on June 15, 2020

Electron JS Native Menu API

An application menu is common in most native desktop applications, just like the example below;

There are several ways to approach this task, but I will use just one method in this article.

• Open your main JavaScript file and type the code below,
  

  //menu//
  
  const electron = require ('electron')
  
  const app = electron.app // electron module
  const BrowserWindow = electron.BrowserWindow //enables UI
  const Menu = electron.Menu // menu module
  
  app.on('ready', _ => {
      new BrowserWindow()
  
      const template = [
          {
              label: 'Help',
          },
          {
              label: 'File',
          },
          {
              label: 'Edit',
          },
          {
              label: 'View',
          },
          {
              label: 'Run',
          }
      ]
      const menu = Menu.buildFromTemplate (template)
      Menu.setApplicationMenu (menu)
  })
  

• From the code above, we simply started by calling the electron module it's self as usual,
• Creating a new browser window or "desktop window" and also calling the menu module required to build or customize an app menu.
• In this tutorial, we will use menu.buildFromTemplate to build the application's menu.
• As you can see, menu.buildFromTemplate accepts an array which includes the menu items in a kind of JSON format.
• Finally, "menu.buildFromTemplate" which was assigned to a variable is passed as the menu parameter to "menu.setApplicationMenu".
• Run your code and enjoy your output.
• Options related to the menu can be found in their official documentation.

Output: