🎚
Context menu
A context menu pops up where the mouse cursor is to provide easily accessible actions. Usually, it is used when you right-click on an item.
window.todesktop.contextMenu.create(menuTemplate)
menuTemplate
Array of objects - For full documentation refer to Electron's documentation about theoptions
object in the MenuItem constructor.
For example, to create a context menu like the screenshot below:

You would use the following code:
window.todesktop.contextMenu.create([
{
label: "Log 'hi'",
click: () => {
console.log("hi");
},
},
{ role: "reload" },
{ type: "separator" },
{ role: "togglefullscreen" },
]);
Usually, you will want to provide a context menu when a user right-clicks on something in your app. To do this you will want to prevent the default action of the
contextmenu
event.First, let's make sure that we have a
textarea
on the page.<textarea id="my-message" cols="60" rows="10"></textarea>
Next, let's listen for
contextmenu
events on the textarea
element and provide our own custom context menu instead.document.getElementById("my-message").addEventListener("contextmenu", (e) => {
// Prevent the usual context menu from appearing
e.preventDefault();
// Show our custom context menu instead
window.todesktop.contextMenu.create([
{
label: "Add Emoji",
click: () => {
// In this case, you would provide the `showEmojiPanel` function
showEmojiPanel();
},
},
{ type: "separator" },
{ role: "copy" },
{ role: "paste" },
]);
});

Last modified 2yr ago