Creating a custom menu item

Check out the Help menu item:

Like the other menu items, if you don't provide a custom application menu template, the Electron shell does this for you at runtime. Let's change that and provide a simple About Editor Component menu item that opens the home page of the SimpleMDE markdown editor component we are using for our application:

1. First of all, create a new file called menu.js in the project's root folder.

Here, you need to import the Menu and shell objects from the Electron framework. The Menu object provides an API that we can use to build an application menu from a JSON template. The shell object is going to help us invoke a browser window with a URL address that we can use to navigate:

      const { Menu, shell } = require('electron');

1. Next, we need a template for our application menu that's in JSON format. Append the following code to the end of the menu.js file so that it holds a simple menu template:

      const template = [
        {
          role: 'help',
          submenu: [
            {
              label: 'About Editor Component',
              click() {
                  shell.openExternal('https://simplemde.com/');
              }
            }
          ]
        }
      ];

As you can see, there is an object with the role property set to help. This defines a top-level menu item called Help. We are going to focus on what role means in a minute, so for now take it as it is. After that, we create a submenu array to hold submenu items and declare an About Editor Component array with a click handler in order to invoke an external browser.

This is a minimal template, just to show you how to assemble a custom application menu. To compile our first template into a real menu, we need to call the Menu.buildFromTemplate function, which converts our JSON content into an Electron Menu object:

      const menu = Menu.buildFromTemplate(template);

      module.exports = menu;

We build a new instance of the menu and export it through the module.exports call. Module exporting is a Node.js feature that allows us to import the Menu instance to other files. In our case, we need to export the menu from the menu.js file and import it to index.js, which is where the central part of our program lives.

1. Switch to the index.js file and update its content so that it looks as follows:

      const { app, BrowserWindow, Menu } = require('electron');
      const menu = require('./menu');
      
      let window;
      
      app.on('ready', () => {
          window = new BrowserWindow({
            width: 800,
            height: 600,
            webPreferences: {
              nodeIntegration: true
            }
          });
          window.loadFile('index.html');
      });

      Menu.setApplicationMenu(menu);

Most of the files should be familiar to you. We import the menu object from the menu.js file that we created earlier. Then, we build the main application window and load the index.html file into it. Finally, we set a new application menu based on our custom template:

1. Now, save the changes if you haven't done so already and launch the application. Given that we just redefined the whole application menu, you should see only two menu items: Electron and Help. The Electron menu is something you get out of the box when running on macOS, and the Help menu is what we defined in our code earlier.

1. Click the Help menu and ensure that you can see the About Editor Component entry. If you click the About.. menu entry, your system browser should open with the https://simplemde.com/ address loaded.

Now that you can create menu items, let's take a look at the different menu item roles.