Add icons and context menus to the system's notification area.
Process: Main
Tray is an EventEmitter.
const {app, Menu, Tray} = require('electron')
let tray = null
app.on('ready', () => {
tray = new Tray('/path/to/my/icon')
const contextMenu = Menu.buildFromTemplate([
{label: 'Item1', type: 'radio'},
{label: 'Item2', type: 'radio'},
{label: 'Item3', type: 'radio', checked: true},
{label: 'Item4', type: 'radio'}
])
tray.setToolTip('This is my application.')
tray.setContextMenu(contextMenu)
})Platform limitations:
GtkStatusIcon will be used instead.libappindicator1 to make the tray icon work.click event is ignored.MenuItems to take effect,
you have to call setContextMenu again. For example:const {app, Menu, Tray} = require('electron')
let appIcon = null
app.on('ready', () => {
appIcon = new Tray('/path/to/my/icon')
const contextMenu = Menu.buildFromTemplate([
{label: 'Item1', type: 'radio'},
{label: 'Item2', type: 'radio'}
])
// Make a change to the context menu
contextMenu.items[1].checked = false
// Call this again for Linux because we modified the context menu
appIcon.setContextMenu(contextMenu)
})ICO icons to get best visual effects.If you want to keep exact same behaviors on all platforms, you should not
rely on the click event and always attach a context menu to the tray icon.
The Tray module emits the following events:
event Event
altKey BooleanshiftKey BooleanctrlKey BooleanmetaKey Booleanbounds Rectangle - The bounds of tray icon.position Point - The position of the event.Emitted when the tray icon is clicked.
event Event
altKey BooleanshiftKey BooleanctrlKey BooleanmetaKey Booleanbounds Rectangle - The bounds of tray icon.Emitted when the tray icon is right clicked.
event Event
altKey BooleanshiftKey BooleanctrlKey BooleanmetaKey Booleanbounds Rectangle - The bounds of tray icon.Emitted when the tray icon is double clicked.
Emitted when the tray balloon shows.
Emitted when the tray balloon is clicked.
Emitted when the tray balloon is closed because of timeout or user manually closes it.
Emitted when any dragged items are dropped on the tray icon.
event Eventfiles String[] - The paths of the dropped files.Emitted when dragged files are dropped in the tray icon.
event Eventtext String - the dropped text string.Emitted when dragged text is dropped in the tray icon.
Emitted when a drag operation enters the tray icon.
Emitted when a drag operation exits the tray icon.
Emitted when a drag operation ends on the tray or ends at another location.
event Event
altKey BooleanshiftKey BooleanctrlKey BooleanmetaKey Booleanposition Point - The position of the event.Emitted when the mouse enters the tray icon.
event Event
altKey BooleanshiftKey BooleanctrlKey BooleanmetaKey Booleanposition Point - The position of the event.Emitted when the mouse exits the tray icon.
event Event
altKey BooleanshiftKey BooleanctrlKey BooleanmetaKey Booleanposition Point - The position of the event.Emitted when the mouse moves in the tray icon.
The Tray class has the following methods:
tray.destroy()Destroys the tray icon immediately.
tray.setPressedImage(image) macOSimage NativeImageSets the image associated with this tray icon when pressed on macOS.
tray.setTitle(title) macOStitle StringSets the title displayed aside of the tray icon in the status bar (Support ANSI colors).
tray.setHighlightMode(mode) macOSmode String - Highlight mode with one of the following values:
selection - Highlight the tray icon when it is clicked and also when
its context menu is open. This is the default.always - Always highlight the tray icon.never - Never highlight the tray icon.Sets when the tray's icon background becomes highlighted (in blue).
Note: You can use highlightMode with a BrowserWindow
by toggling between 'never' and 'always' modes when the window visibility
changes.
const {BrowserWindow, Tray} = require('electron')
const win = new BrowserWindow({width: 800, height: 600})
const tray = new Tray('/path/to/my/icon')
tray.on('click', () => {
win.isVisible() ? win.hide() : win.show()
})
win.on('show', () => {
tray.setHighlightMode('always')
})
win.on('hide', () => {
tray.setHighlightMode('never')
})tray.displayBalloon(options) Windowsoptions Object
icon (NativeImage | String) (optional) -title Stringcontent StringDisplays a tray balloon.
tray.popUpContextMenu([menu, position]) macOS Windowsmenu Menu (optional)position Point (optional) - The pop up position.Pops up the context menu of the tray icon. When menu is passed, the menu will
be shown instead of the tray icon's context menu.
The position is only available on Windows, and it is (0, 0) by default.
tray.isDestroyed()Returns Boolean - Whether the tray icon is destroyed.