How to Create Context Menus

# Introduction

Adding context menus to your desktop app is simple with the ToDesktop API. In this short walkthrough, we’ll make the following menu accessible anywhere throughout your app:

Using your terminal, you'll first need to install the @todesktop/client-core package in your application. This package exposes functionality that we'll need for interacting with the underlying desktop application.

        npm install @todesktop/client-core

      

# Listening for the context-menu event

With that installed, we'll use the webContents namespace to listen for the context-menu event that triggers when a user right clicks in your application:

        import { webContents, menu } from '@todesktop/client-core';

webContents.on('context-menu', async () => {
  // ...
});

      

# Building and displaying the context menu

Inside the body of the function, we'll use the imported menu namespace to construct the context menu that we want to appear

        import { webContents, menu } from '@todesktop/client-core';

webContents.on('context-menu', async () => {
  const menuRef = await menu.buildFromTemplate({
    template: [
      { label: `Item 1` },
      { label: `Item 2` },
      { type: 'separator' },
      {
        label: `Item 3`,
        click: () => {
          console.log('Clicked item 3');
        }
      }
    ]
  });

  // ...
});

      

Finally, we'll use another function on the menu namespace which makes the context menu visible at the current mouse coordinates:

        import { webContents, menu } from '@todesktop/client-core';

webContents.on('context-menu', async () => {
  // ...

  await menu.popup({ ref: menuRef });
});

      

And that's basically it! For more interesting ways in which you can use context menus, make sure to check out our short guide on building a dynamic menu that you can attach to the tray.

# Creating multiple different context menus for different elements

You may want to create context menus that vary depending on the element being interacted with. For example, maybe you want to display one context menu when a user right clicks on an image, and another when they right click on a button. Let's see how we can do that.

First, we'll add an event listener to capture the clicked element. This information will be used to determine which context menu to display. The event.target property will contain the element that was clicked, we are storing that property for use in our context-menu listener.

        let clickedElement = null;

document.addEventListener('click', (event) => {
  clickedElement = event.target;
});

      

# Handling different clicked elements

Utilize the ToDesktop API to listen for the context-menu event and display the appropriate menu based on the clickedElement that we stored in the previous step.

        webContents.on('context-menu', async () => {
  const menuTemplate = buildContextMenu(clickedElement);
  const menuRef = await menu.buildFromTemplate({ template: menuTemplate });
  await menu.popup({ ref: menuRef });
});

function buildContextMenu(element) {
  if (element.nodeName === 'IMG') {
    // Image
    return [{ label: 'Save Image' }, { label: 'Copy Image URL' }];
  } else if (element.nodeName === 'P') {
    // Paragraph of text
    return [{ label: 'Copy Text' }, { label: 'Highlight Text' }];
  }
  return [{ label: 'Default Action' }];
}

      

# Attaching a context menu to a tray

To attache a context menu to a tray then you can check out our short guide on building a dynamic menu that you can attach to the tray.