0Pricing
Electron Desktop App Development · Leçon

Menus natifs et menus contextuels

Mettez en œuvre des menus d’application personnalisés, des menus contextuels et des menus de zone de notification afin d’offrir aux utilisateurs une navigation et des options familières.

Menus natifs et menus contextuels est une leçon Electron Desktop App Development gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Electron Desktop App Development, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Electron Desktop App Development comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

Native Menus in Electron

Electron lets you build desktop apps using web technologies. But desktop apps also need native features like menus!

Native menus offer a familiar experience to users, fitting seamlessly into their operating system. Electron's Menu module allows you to create these.

  • Application Menus: The main menu bar (File, Edit, View).
  • Context Menus: Right-click menus specific to an element.
  • Tray Menus: Menus for icons in the system tray or dock.

Building the Main Menu Bar

The Application Menu is the main menu bar at the top of your app window (Windows/Linux) or the top of the screen (macOS).

It usually contains standard options like "File", "Edit", "View", and "Help". These menus make your app feel native and provide essential navigation.

You define its structure using a JavaScript array of objects, called a menu template.

Code: Basic Application Menu

Let's create a minimal application menu. This code snippet goes into your Electron app's main.js file.

It defines a "File" menu with an "Exit" option that quits the app. (Note: nodeIntegration: true, contextIsolation: false are used here for simplicity in examples, but often require more secure configurations for production apps).

const { app, BrowserWindow, Menu } = require('electron');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('index.html'); // Ensure you have an index.html file

  const template = [
    {
      label: 'File',
      submenu: [
        {
          label: 'Exit',
          accelerator: 'CmdOrCtrl+Q',
          click() { app.quit(); }
        }
      ]
    }
  ];

  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);

  mainWindow.on('closed', () => { mainWindow = null; });
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', () => {
  if (mainWindow === null) createWindow();
});

Advanced Menu Items & Roles

Menu items can have special roles that provide standard functionality (like 'copy', 'paste', 'quit') and ensure platform-specific behavior.

You can also create nested menus (submenus) to organize options better. Accelerators (keyboard shortcuts) can be added for quick access.

  • role: 'quit': Quits the app.
  • role: 'separator': Adds a dividing line.
  • accelerator: 'CmdOrCtrl+Z': Defines a keyboard shortcut.

Code: Full Application Menu

Let's enhance our application menu. We'll add an "Edit" menu with standard roles and a "Help" menu with a custom item.

Notice how roles simplify common actions, and submenus keep the main menu clean.

const { app, BrowserWindow, Menu } = require('electron');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('index.html');

  const template = [
    {
      label: 'File',
      submenu: [
        { label: 'New', accelerator: 'CmdOrCtrl+N' },
        { type: 'separator' },
        { label: 'Exit', role: 'quit' }
      ]
    },
    {
      label: 'Edit',
      submenu: [
        { label: 'Undo', role: 'undo' },
        { label: 'Redo', role: 'redo' },
        { type: 'separator' },
        { label: 'Cut', role: 'cut' },
        { label: 'Copy', role: 'copy' },
        { label: 'Paste', role: 'paste' }
      ]
    },
    {
      label: 'Help',
      submenu: [
        { label: 'About App', click() { console.log('About clicked!'); } }
      ]
    }
  ];

  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);

  mainWindow.on('closed', () => { mainWindow = null; });
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', () => {
  if (mainWindow === null) createWindow();
});

Dynamic Context Menus

Context menus are those "right-click" menus that appear when you interact with specific elements or areas of an application.

Unlike the static application menu, context menus are often dynamic, changing based on what you've clicked on. They're built using the same Menu module.

They are typically created in the main process and then displayed (popped up) from the renderer process via Inter-Process Communication (IPC).

Code: Creating a Context Menu

Here's how to define a simple context menu. For this example, we'll demonstrate it being popped up from the main process after a delay for simplicity. In a real app, it's usually triggered by a right-click event in the renderer process, communicating with the main process.

The popup() method displays the menu.

const { app, BrowserWindow, Menu } = require('electron');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('index.html');

  const contextMenuTemplate = [
    { label: 'Inspect Element', click() { mainWindow.webContents.openDevTools(); } },
    { type: 'separator' },
    { label: 'Reload Page', role: 'reload' }
  ];

  const contextMenu = Menu.buildFromTemplate(contextMenuTemplate);

  // For demonstration: show context menu after a delay
  setTimeout(() => {
    contextMenu.popup({ window: mainWindow });
    console.log('Context menu popped up!');
  }, 3000);

  mainWindow.on('closed', () => { mainWindow = null; });
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', () => {
  if (mainWindow === null) createWindow();
});

System Tray & Dock Menus

A tray icon (also known as a status bar icon on macOS or system tray icon on Windows/Linux) allows your application to run in the background and provide quick access to common actions.

The Tray module in Electron lets you create these icons and attach a tray menu to them, which appears when the user interacts with the icon (e.g., right-click).

Code: Basic Tray Menu

This example shows how to create a simple tray icon with a context menu. Remember to provide a small icon file (e.g., icon.png) in your project root.

The tray icon will appear in your system's notification area or dock. Clicking the tray icon will toggle the main window's visibility.

const { app, BrowserWindow, Menu, Tray } = require('electron');
const path = require('path');

let mainWindow;
let tray;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    show: false, // Start hidden for tray app
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('index.html');

  mainWindow.on('closed', () => { mainWindow = null; });
}

app.whenReady().then(() => {
  createWindow();

  // Path to your icon file (e.g., in the same directory as main.js)
  const iconPath = path.join(__dirname, 'icon.png'); 
  tray = new Tray(iconPath);

  const contextMenu = Menu.buildFromTemplate([
    { label: 'Open App', click: () => { mainWindow.show(); } },
    { label: 'Toggle DevTools', click: () => { mainWindow.webContents.toggleDevTools(); } },
    { type: 'separator' },
    { label: 'Quit', click: () => { app.quit(); } }
  ]);

  tray.setToolTip('My Electron Tray App');
  tray.setContextMenu(contextMenu);

  tray.on('click', () => {
    mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
  });
});

app.on('before-quit', () => {
  // Clean up tray icon before quitting to prevent memory leaks
  if (tray) tray.destroy();
});

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the dock icon is clicked
  if (mainWindow === null) createWindow();
});

// For apps with tray icons, you might not want to quit when all windows are closed
// app.on('window-all-closed', () => {
//   if (process.platform !== 'darwin') app.quit(); 
// });

Menu Types Check

You've learned about different types of native menus in Electron.

Which of the following statements about Electron menus is TRUE?

Menus: Key Takeaways

Well done! You've learned how to integrate native menus into your Electron applications.

  • Use the Menu module to create application, context, and tray menus.
  • Define menu structures using menu templates (arrays of objects).
  • Leverage menu item roles for standard functionality and platform consistency.
  • Application menus are for the main window bar, context menus for dynamic right-click options, and tray menus for system tray/dock icons.
  • Always use Menu.buildFromTemplate() and Menu.setApplicationMenu() for the main app menu.

These native touches greatly improve the user experience of your desktop app!

Questions Fréquemment Posées

La leçon « Menus natifs et menus contextuels » est-elle gratuite ?

Oui — le texte complet de « Menus natifs et menus contextuels » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Electron Desktop App Development, passe à CoddyKit PRO. Le cours Electron Desktop App Development comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Menus natifs et menus contextuels » ?

Mettez en œuvre des menus d’application personnalisés, des menus contextuels et des menus de zone de notification afin d’offrir aux utilisateurs une navigation et des options familières. Tu pratiques Electron Desktop App Development avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Electron Desktop App Development ?

Aucune expérience préalable n'est requise. Electron Desktop App Development sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Menus natifs et menus contextuels » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Electron Desktop App Development ?

Oui. Chaque leçon Electron Desktop App Development inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Menus natifs et menus contextuels
  2. Boîtes de dialogue et notifications
  3. Intégration au système
  4. Raccourcis globaux et accès au presse-papiers
← Retour à Electron Desktop App Development