Skip to main content

Dock Menu

On macOS, the Dock is an interface element that displays open and frequently-used apps. While opened or pinned, each app has its own icon in the Dock.

note

On macOS, the Dock is the entry point for certain cross-platform features like Recent Documents and Application Progress. Read those guides for more details.

Dock API​

All functionality for the Dock is exposed via the Dock class exposed via app.dock property. There is a single Dock instance per Electron application, and this property only exists on macOS.

One of the main uses for your app's Dock icon is to expose additional app menus. The Dock menu is triggered by right-clicking or Ctrl-clicking the app icon. By default, the app's Dock menu will come with system-provided window management utilities, including the ability to show all windows, hide the app, and switch betweeen different open windows.

To set an app-defined custom Dock menu, pass any Menu instance into the dock.setMenu API.

tip

For best practices to make your Dock menu feel more native, see Apple's Human Interface Guidelines page on Dock menus.

Attaching a context menu​

Setting a Dock menu
const { app, BrowserWindow, Menu } = require('electron/main')

// dock.setMenu only works after the 'ready' event is fired
app.whenReady().then(() => {
  const dockMenu = Menu.buildFromTemplate([
    {
      label: 'New Window',
      click: () => { const win = new BrowserWindow() }
    }
    // add more menu options to the array
  ])

  // Dock is undefined on platforms outside of macOS
  app.dock?.setMenu(dockMenu)
})
note

Unlike with regular context menus, Dock context menus don't need to be manually instrumented using the menu.popup API. Instead, the Dock object handles click events for you.

tip

To learn more about crafting menus in Electron, see the Menus guide.

Runnable Fiddle demo​

Below is a runnable example of how you can use the Dock menu to create and close windows in your Electron app.

docs/fiddles/menus/dock-menu (36.3.1)Open in Fiddle
const { app, BrowserWindow, Menu } = require('electron/main')
const { shell } = require('electron/common')

function createWindow () {
  const win = new BrowserWindow()
  win.loadFile('index.html')
}

function closeAllWindows () {
  const wins = BrowserWindow.getAllWindows()
  for (const win of wins) {
    win.close()
  }
}

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

  const dockMenu = Menu.buildFromTemplate([
    {
      label: 'New Window',
      click: () => { createWindow() }
    },
    {
      label: 'Close All Windows',
      click: () => { closeAllWindows() }
    },
    {
      label: 'Open Electron Docs',
      click: () => {
        shell.openExternal('https://electronjs.org/docs')
      }
    }
    // add more menu options to the array
  ])

  app.dock.setMenu(dockMenu)

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

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