🎚

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.

Create a context menu
window.todesktop.contextMenu.create(menuTemplate)
menuTemplate Array of objects - For full documentation refer to Electron's documentation about the options 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" },
  ]);
Create a right-click context menu
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.
Example: Add a custom emoji picker when right-clicking on a textarea
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" },
  ]);
});
​

Javascript API - Previous

Application Menu

Next - Recipes

Send Native Notifications

Last modified 1yr ago