Saltar al contenido principal

Menú de bandeja

Esta guía te llevará a través del proceso de crear un icono con su propio menú contextual en la bandeja del sistema.

  • En macOS, el icono está ubicado en la esquina superior derecha de tu pantalla en el área barra de menús extras.
  • En Windows, el icono está ubicado en el área de notificación al final de la barra de tareas.
  • En Linux, la ubicación de la bandeja diferirá en función de su entorno de escritorio.

Creando un icono de bandeja​

The tray icon for your Electron app needs to be created programmatically with an instance of the Tray class. The class constructor requires a single instance of a NativeImage or a path to a compatible icon file.

[!NOTE] File formats vary per operating system. For more details, see the Platform Considerations section of the Tray API documentation.

Minimizing to tray​

In order to keep the app and the system tray icon alive even when all windows are closed, you need to have a listener for the window-all-closed event on the app module. The base Electron templates generally listen for this event but quit the app on Windows and Linux to emulate standard OS behavior.

Setting up minimize to tray
app.on('window-all-closed', () => {
  // having this listener active will prevent the app from quitting.
})

Attaching a context menu​

You can attach a context menu to the Tray object by passing in a Menu instance into the tray.setContextMenu function.

[!NOTE] Unlike with regular context menus, Tray context menus don't need to be manually instrumented using the menu.popup API. Instead, the Tray object handles click events for you (although various click-related events exist on the API for advanced use cases).

Creating a Tray menu that can quit the app
const { nativeImage } = require('electron/common')
const { app, Tray, Menu } = require('electron/main')

// save a reference to the Tray object globally to avoid garbage collection
let tray

// 16x16 red circle data URL
const icon = nativeImage.createFromDataURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACTSURBVHgBpZKBCYAgEEV/TeAIjuIIbdQIuUGt0CS1gW1iZ2jIVaTnhw+Cvs8/OYDJA4Y8kR3ZR2/kmazxJbpUEfQ/Dm/UG7wVwHkjlQdMFfDdJMFaACebnjJGyDWgcnZu1/lrCrl6NCoEHJBrDwEr5NrT6ko/UV8xdLAC2N49mlc5CylpYh8wCwqrvbBGLoKGvz8Bfq0QPWEUo/EAAAAASUVORK5CYII=')

// The Tray can only be instantiated after the 'ready' event is fired
app.whenReady().then(() => {
  tray = new Tray(icon)
  const contextMenu = Menu.buildFromTemplate([
    { role: 'quit' }
  ])
  tray.setContextMenu(contextMenu)
})

[!TIP] To learn more about crafting menus in Electron, see the Menus guide.

[!WARNING] The enabled and visibility properties are not available for top-level menu items in the tray on macOS.

Runnable Fiddle demo​

Below is a runnable example of attaching various menu items to the Tray's context menu that help control app state and interact with the Tray API itself. fiddle docs/latest/fiddles/menus/tray-menu