🎚
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)
For example, to create a context menu like the screenshot below:
You would use the following code:
1
window.todesktop.contextMenu.create([
2
{
3
label: "Log 'hi'",
4
click: () => {
5
console.log("hi");
6
},
7
},
8
{ role: "reload" },
9
{ type: "separator" },
10
{ role: "togglefullscreen" },
11
]);
Copied!

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.
1
<textarea id="my-message" cols="60" rows="10"></textarea>
Copied!
Next, let's listen for contextmenu events on the textarea element and provide our own custom context menu instead.
1
document.getElementById("my-message").addEventListener("contextmenu", (e) => {
2
// Prevent the usual context menu from appearing
3
e.preventDefault();
4
5
// Show our custom context menu instead
6
window.todesktop.contextMenu.create([
7
{
8
label: "Add Emoji",
9
click: () => {
10
// In this case, you would provide the `showEmojiPanel` function
11
showEmojiPanel();
12
},
13
},
14
{ type: "separator" },
15
{ role: "copy" },
16
{ role: "paste" },
17
]);
18
});
19
​
Copied!