Dock (macOS)

Electron has APIs to configure the app’s icon in the macOS Dock. A macOS-only API exists to create a custom dock menu, but Electron also uses the app dock icon as the entry point for cross-platform features like recent documents and application progress.

The custom dock is commonly used to add shortcuts to tasks the user wouldn’t want to open the whole app window for.

Dock menu of Terminal.app:

Dock Menu

To set your custom dock menu, you need to use the app.dock.setMenu API, which is only available on macOS.

Example

Starting with a working application from the Quick Start Guide, update the main.js file with the following lines:

  • index.html
  • main.js
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Hello World!</title>
  6.     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  7. </head>
  8. <body>
  9.     <h1>Hello World!</h1>
  10.     <p>Right click the dock icon to see the custom menu options.</p>
  11. </body>
  12. </html>
  1. const { app, BrowserWindow, Menu } = require('electron')
  3. function createWindow () {
  4.   const win = new BrowserWindow({
  5.     width: 800,
  6.     height: 600,
  7.   })
  9.   win.loadFile('index.html')
  10. }
  12. const dockMenu = Menu.buildFromTemplate([
  13.   {
  14.     label: 'New Window',
  15.     click () { console.log('New Window') }
  16.   }, {
  17.     label: 'New Window with Settings',
  18.     submenu: [
  19.       { label: 'Basic' },
  20.       { label: 'Pro' }
  21.     ]
  22.   },
  23.   { label: 'New Command...' }
  24. ])
  26. app.whenReady().then(() => {
  27.   if (process.platform === 'darwin') {
  28.     app.dock.setMenu(dockMenu)
  29.   }
  30. }).then(createWindow)
  32. app.on('window-all-closed', () => {
  33.   if (process.platform !== 'darwin') {
  34.     app.quit()
  35.   }
  36. })
  38. app.on('activate', () => {
  39.   if (BrowserWindow.getAllWindows().length === 0) {
  40.     createWindow()
  41.   }
  42. })

Open in Fiddle

After launching the Electron application, right click the application icon. You should see the custom menu you just defined:

macOS dock menu