Made by @kilianvalkhof
- 💻 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
provides a default menu for your electron applications, with convenience functions for multiplatform use and i18n.
Install using npm install electron-create-menu
.
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.
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);
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.
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 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.
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
);
});
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
.
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;
});
Electron-create-menu is ISC licensed.