#JavaScript #Node #Electron

This post will show you how to set up menus in Electron and Mac OS X.

Get started

npm init

Let’s set up a basic simple Electron app.

Start with

$ npm init -y
  • Set the main entry point to src/index.js.
  • Set the start npm script to be electron ..

Install Electron

Then install electron with

$ npm install --save-dev electron-prebuilt

index.js

Create an src/index.js file and put the following content in:

src/index.js
const electron = require('electron');

const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

app.on('ready', function () {
    new BrowserWindow();
});

Run npm start and doublecheck that everything works – you should see a blank window open and the Mac OS X menu is the default Electron menu.

If you need help with that part, check out my tutorial on getting started with Electron.

Set a custom menu

Override the Default Electron Development Menu

First pull the Menu class from electron:

src/index.js
const Menu = electron.Menu;

Then use the buildFromTemplate method to generate the menu and setApplicationMenu to set it.

Here is the full code:

src/index.js
const electron = require('electron');

const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;

app.on('ready', function () {
   new BrowserWindow();

    const menuTemplate = [
        {
            label: 'Electron'
        }
    ];

    const menu = Menu.buildFromTemplate(menuTemplate);
    Menu.setApplicationMenu(menu);
});

Run the app and check that the default menu is no more.

Define some menu items

At the moment, our menu is empty. (Also you can’t set the first Menu name to anything else than Electron – you need to package the app for another name to appear)

  • Let’s add an about menu item.
src/index.js
const menuTemplate = [
    {
        label: 'Electron',
        submenu: [
            {
                label: 'About ...',
                click: () => {
                    console.log('About Clicked');
                }
            }
        ]
    }
];

Run the app and observe how a click writes to the console.

  • Let’s add a Quit Menu Item.
src/index.js
const menuTemplate = [
    {
        label: 'Electron',
        submenu: [
            {
                label: 'About ...',
                click: () => {
                    console.log('About Clicked');
                }
            }, {
                label: 'Quit',
                click: () => {
                    app.quit();
                }
            }
        ]
    }
];

Run the app and doublecheck that the Quit button actually quits the app.

  • Let’s add a separator

You might have noticed that something is missing. Let’s add an horizontal line in between About and Quit with { type: 'separator' }

src/index.js
const menuTemplate = [
    {
        label: 'Electron',
        submenu: [
            {
                label: 'About ...',
                click: () => {
                    console.log('About Clicked');
                }
            }, {
                type: 'separator'
            }, {
                label: 'Quit',
                click: () => {
                    app.quit();
                }
            }
        ]
    }
];

Run the app and notice the difference.

What’s next ?

Now that you know the basics of setting up a custom menu for your app, you should have no problem scrolling through the docs.

Here are a few things you can try:

  • Try to use the accelerator property to link menu items with Application Shortcuts.
  • Set a default role for the click action. Check the list of roles here.
  • Create a submenu with the submenu property.
#JavaScript #Node #Electron