Dynamically Editing the Application Menu

The Application menu lives at the top of the screen on Mac. On Windows, you can find it under your app window's title bar. You can dynamically add items to this menu using our Application Menu API.

# Add a menu item to the application menu

You can use appMenu.add from @todesktop/client-core to easily add custom items to the application menu that control your application.

        import { appMenu } from '@todesktop/client-core';

const parentMenu = 'File';
const label = 'Save Note';
const options = {
  // "accelerator" is the keyboard shortcut that you can use
  // to trigger the menu item
  accelerator: 'CommandOrControl+S'
};

await appMenu.add(
  parentMenu,
  label,
  () => {
    // Put your app logic to "save a note" here
  },
  options
);

// This is required for the additional items to appear in the UI
await appMenu.refresh();

      

# Refresh the application menu to reflect any changes

When you add a menu item to the menubar, it does not immediately appear in the application menu. You need to call refresh() to update the menu that is displayed on the UI.

If you are adding multiple items to the application menu then it is best to only call refresh() after you have added all of the necessary items to the application menu.

        import { appMenu } from '@todesktop/client-core';

// Batch add all the app menu items
await Promise.all([
  appMenu
    .add
    // ...
    (),
  appMenu
    .add
    // ...
    (),
  appMenu
    .add
    // ...
    ()
]);

// Once they are all added then you can call refresh
await appMenu.refresh();