electron-create-menu

Made by @kilianvalkhof

Other projects:

• 💻 Polypane - Develop responsive websites and apps twice as fast on multiple screens at once
• 🖌️ Superposition - Kickstart your design system by extracting design tokens from your website
• 🗒️ FromScratch - A smart but simple autosaving scratchpad

Electron-create-menu

provides a default menu for your electron applications, with convenience functions for multiplatform use and i18n.

Installation

Install using npm install electron-create-menu.

Usage

Instead of importing Menu from electron, import it from electron-create-menu:

import Menu from "electron-create-menu";
// or
const Menu = require("electron-create-menu");

To get a default menu with platform-appropriate menu items and submenus, call Menu like so:

Menu();

Note: This API has to be called after the ready event of app module.

Menu always returns the menu object that Menu.buildFromTemplate creates, so you can access instance methods on it.

Optional arguments

Menu has two optional functions you can pass it

• The first argument is the callback function, where you can further edit (or replace) the generated menu.
• The second argument is the i18n function where you can supply a function to use for translating the menu items.

Menu(callback, i18n);

The callback function

callback receives two arguments:

• The generated menu
• A function that returns {type: 'separator'} for convenience.

It expects you to return a menu-like object, either the edited default menu or a new menu.

Callback example

To append a menu item to the menu, push an object onto menu and return it:

Menu((defaultMenu, separator) => {
  defaultMenu.push({
    label: "My custom menu!",
    submenu: [
      { label: "my first item" },
      separator(),
      { label: "my second item" }
    ]
  });

  return defaultMenu;
});

The i18n function

The i18n function is applied to the labels of the default menu. There are two things worth mentioning:

• Most items in the default menu are specified by a role, so the OS will supply the translation.
• Labels added in the callback function are not translated by this function.

Example using i18next

const i18next = require('i18next');

i18next.init({
  /* assumed setup of i18next here */
}).then(function(t) {

  Menu(
    menu => {
      menu.push({
        label: i18next.t('My custom menu!'),
        submenu: [
          {label: i18next.t('my first item')},
          {label: i18next.t('my second item')},
        ],
      }),

      return menu;
    },

    // This function is used to translate the default labels
    i18next.t
  );

});

Multiplatform use

Each item in your menu can have two new properties, showOn and hideOn. These accept a string or an array of strings that correspond to process.platform values such as 'darwin' or 'win32'.

// this shows the menu item only on macOs
{
  showOn: "darwin";
}

// this hides the menu item on windows and macOs
{
  hideOn: ["win32", "darwin"];
}

With these, you can adapt your menu to multiple platforms without having to maintain multiple menu templates. See the default template for an example of a consolidated template.

You can also add a string or an array of strings as an argument to the separator function: separator('darwin'). The given value is interpreted as the value for showOn.

Example

Menu((defaultMenu, separator) => {

  defaultMenu.push({
    label: "My custom menu!",
    submenu: [
      {
        label: 'This is only shown on macOs',
        showOn: 'darwin',
      },
      separator('darwin'), // this is shown only macOs
      {label:
        'This is hidden on windows'
        hideOn: ['win32']
      },
    ],
  });

  return defaultMenu;
});

License

Electron-create-menu is ISC licensed.