javascriptnode.jselectron

Is it possible to have submenu of a submenu in Electron Menu?

In my app I have Electron Menu consisting 'File', 'Edit', 'Format'. In Format, I have submenus 'Themes', 'Fonts'.

function createMenu (){
  var menu = Menu.buildFromTemplate([
      {
          label: 'File',
          submenu: [
              {label:'New File'},
              {label:'Open File...'},
              {label:'Save'},
              {label:'Save As...'}
          ]
      },
      {
        label: 'Edit',
        submenu: [
              {label:'Something'}
        ]
      },
      {
          label: 'Format',
          submenu: [
            {label: 'Themes'},
            {label:'Fonts'}
          ]
      }
  ]);
  Menu.setApplicationMenu(menu);
}

Is it possible to add another submenu to Themes, so I can choose one right away. This technique is used in many apps.

enter image description here

Solution

  • Sure, simply use the submenu key again to add another submenu:

    const menu = Menu.buildFromTemplate([
{
    label: 'File',
    submenu: [
    {
        label: 'New File'
    },
    {
        label: 'Open File...'
    },
    {
        label: 'Save'
    },
    {
        label: 'Save As...'
    }]
},
{
    label: 'Edit',
    submenu: [
    {
        label: 'Something'
    }]
},
{
    label: 'Format',
    submenu: [
    {
        label: 'Themes',
        submenu: [
        {
            label: 'Theme 1'
        },
        {
            label: 'Theme 2'
        },
        {
            label: 'Theme 3'
        }]
    },
    {
        label: 'Fonts'
    }]
}]);

    There is also nothing stopping you from building a tree that is even more levels deep:

    const menu = Menu.buildFromTemplate([
{
    label: 'Format',
    submenu: [
    {
        label: 'Themes',
        submenu: [
        {
            label: 'Foo1',
            submenu: [
            {
                label: 'Foo2',
                submenu: [
                {
                    label: 'Foo3'
                }]
            }]
        }]
    }]
}]);