目录
Guides

Application Menu

How to configure application menu on macOS with the standard and custom menu items.

MōBrowser application menu on macOS

Every macOS application has a main menu. By default, the application has a standard main menu with pre-defined menu items. However, you have the flexibility to set your own main menu, incorporating both standard and custom menu items.

Setting the main menu 

The following code snippet shows how to set the application main menu that contains the standard and custom menu items:

const macAppMenu = new MenuWithRole({
  role: 'macAppMenu',
  items: [
    new MenuItem({
      id: 'about',
      label: 'About ' + app.name,
      action: (item: MenuItem) => {}
    }),
    'macHideApp',
    'macHideOthers',
    'macShowAll',
    'separator',
    'quit',
  ]
})

const fileMenu = new MenuWithRole({
  role: 'fileMenu',
  items: [
    'savePageAs',
    'separator',
    'print',
    'printUsingSystemDialog',
    'separator',
    'closeWindow',
  ]
})

const editMenu = new MenuWithRole({
  role: 'editMenu',
  items: [
    'undo',
    'redo',
    'separator',
    'cut',
    'copy',
    'paste',
    'pasteAndMatchStyle',
    'delete',
    'selectAll',
    'separator',
    'find',
    'findNext',
    'findPrevious',
  ]
})

const viewMenu = new Menu({
  label: 'View',
  items: [
    'goBack',
    'goForward',
    'separator',
    'stop',
    'reload',
    'reloadBypassCache',
    'separator',
    'zoomReset',
    'zoomIn',
    'zoomOut',
    'separator',
    'fullScreen',
    'separator',
    'viewSource',
    'devTools'
  ]
})

const windowMenu = new MenuWithRole({
  role: 'windowMenu',
  items: [
    'minimizeWindow',
    'maximizeWindow',
  ]
})

const helpMenu = new MenuWithRole({
  role: 'helpMenu',
  items: [
    new MenuItem({
      id: 'openWebsite',
      label: 'Open Website...',
      shortcut: 'CmdOrCtrl+O',
      action: (_item: MenuItem) => {
        desktop.openUrl('https://teamdev.com/mobrowser')
      }
    }),
  ]
})

const appMenu = new Menu({
  items: [
    macAppMenu,
    fileMenu,
    editMenu,
    viewMenu,
    windowMenu,
    helpMenu,
  ]
})
app.setMenu(appMenu)

The title of the application menu will be set to the name of your application.

Here’s how it will look like:

macOS app menu

On macOS the name of the application menu is always your app’s name. You can set the app name in the mobrowser.conf.json file.

{
  "app": {
    "name": "MyApp",
    "version": {
      "major": "1",
      "minor": "0",
      "patch": "0"
    },
    "author": "",
    "copyright": "",
    "description": "",
    ...
  }
}

Standard menu item roles 

You can create a standard menu (without menu items) using the following roles:

Role NameDescription
'macAppMenu'Creates the macOS $APP_NAME menu.
'fileMenu'Creates the File menu.
'editMenu'Creates the Edit menu.
'viewMenu'Creates the View menu.
'windowMenu'Creates the Window menu.
'helpMenu'Creates the Help menu.

Use the following roles to create standard menu items:

Role NameDescription
'separator'Creates a menu separator.

The application standard menu items:

Role NameDescription
'macHideApp'Creates the Hide $APP_NAME menu item.
'macHideOthers'Creates the Hide Others menu item.
'macShowAll'Creates the Show All menu item.
'quit'Creates the Quit $APP_NAME menu item.

The File standard menu item roles:

Role NameDescription
'savePageAs'Creates the Save Page As… menu item.
'print'Creates the Print… menu item.
'printUsingSystemDialog'Creates the Print Using System Dialog menu item.
'closeWindow'Creates the Close Window menu item.

The Edit standard menu item roles:

Role NameDescription
'undo'Creates the Undo menu item.
'redo'Creates the Redo menu item.
'cut'Creates the Cut menu item.
'copy'Creates the Copy menu item.
'paste'Creates the Paste menu item.
'pasteAndMatchStyle'Creates the Paste and Match Style menu item.
'delete'Creates the Delete menu item.
'selectAll'Creates the Select All menu item.
'find'Creates the Find menu item.
'findNext'Creates the Find Next menu item.
'findPrevious'Creates the Find Previous menu item.

The View standard menu item roles:

Role NameDescription
'goBack'Creates the Back menu item.
'goForward'Creates the Forward menu item.
'stop'Creates the Stop menu item.
'reload'Creates the Reload menu item.
'reloadBypassCache'Creates the Reload Bypassing Cache menu item.
'zoomReset'Creates the Actual Size menu item.
'zoomIn'Creates the Zoom In menu item.
'zoomOut'Creates the Zoom Out menu item.
'fullScreen'Creates the Enter Full Screen menu item.
'devTools'Creates the Toggle Developer Tools menu item.
'viewSource'Creates the View Source menu item.

The Window standard menu item roles:

Role NameDescription
'minimizeWindow'Creates the Minimise menu item.
'maximizeWindow'Creates the Maximize menu item.

You can set the shortcut key for a menu item by using the shortcut property.

const helpMenu = new MenuWithRole({
  role: 'helpMenu',
  items: [
    new MenuItem({
      id: 'openWebsite',
      label: 'Open Website...',
      shortcut: 'CommandOrControl+O',
      action: (_item: MenuItem) => {
        desktop.openUrl('https://teamdev.com/mobrowser')
      }
    }),
  ]
})
本页内容