Creating a custom menu in electron desktop application

In the previous tutorial, “Getting Started with Electron Framework“, we discussed how to start a basic electron application. In this article, we will create a custom menu for our electron application. By default, the electron application will have a default menu. Having a custom menu is required, as we would want the user to have custom functionalities within few clicks like ‘changing the user account’.

Inserting a custom application menu

For creating a custom electron menu, first, we have to import the menu module into the main application file – ‘main.js’. After importing the module, create a template for the menu using “buildFromTemplate” function from the menu module. The function takes array input and each menu item is given in JSON format. The name of the menu item is specified with a preceding key ‘label’. The submenu is also specified in JSON format with a prefix key ‘submenu’.

const{app, BrowserWindow, Menu} = electron;
 const mainMenuTemplate = [
     { label:'File',
                 submenu: [
               {label:'Upload File'},
               {label:'Preferences'},
               {label:'Exit'}
           ]    },
     {label:'Tools'},
     {label:'Edit'}
 ]; 

After creating template, call the template in “app.on” section created in the previous tutorial.  And finally, set the template as default menu using “setApplicationMenu” function.

const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
Menu.setApplicationMenu(mainMenu);

Now test the application by calling the command “npm start” in terminal.

electron-application-custom-menu
Application with custom Menu

Making a clickable menu item

Now that we have created a menu, we will learn how to make a menu item clickable. This is done by assigning a function to the menu item using a function “click()”. Inside the click function, we specify the action to perform.

In this section, we will make a simple action to “exit” submenu item, such that when the user clicks on exit, the application closes. To achieve this, we will be using “app.quit()” inside the click function.

label:'Exit',
click() {
app.quit()
                }

Now save the code and run the application again for testing the functionality.

clickable-menu-code-snippet
Clickable menu code snippet

Adding keyboard shortcuts to clickable menu

Adding a keyboard shortcut is tricky since Mac and Windows keyboards have a difference in keys.

Older method:

To solve this, first, we will find the platform on which the application is running. For Mac, the platform will be ‘darwin’ and for windows, it is ‘win32’. Then depending on the platform, we will use a ternary operator (You can use if-else statement too, but ternary looks simple).

To find the platform, we will use “process.platfrom” function from the node module. To define keyboard shortcuts, the “accelerator” function is used.

{ label:'Exit',
                accelerator: process.platform == 'darwin' ? 'Command+Q' :'Ctrl+Q',
                click() {
                    app.quit()
                }}

Run the application and press Ctrl key + q (for Windows) or Cmd key + q (for Mac).

Easy method:

Use ‘Or’ keyword between Cmd and Ctrl.

accelerator: 'CmdOrCtrl+Q'

To find all of the available keyboard shortcuts, codes and modifiers, click on this link here.

Separating Menu Items

In certain situations, we need to separate sub-menu items based on priority. We will add a line to separate menu items and to do this add an object ‘separator’ with property ‘type’ between the menu items where separation is needed.

{type:'separator'},
custom clickable menu with seperator
custom clickable menu with seperator

Finally, run the application and test it. With this, we have successful created a custom electron menu for our electron desktop application.

1 thought on “Creating a custom menu in electron desktop application”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.