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

Viewed 154

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

  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 (via arrow) to Themes, so I can choose one right away. This technique is used in many apps. (Like shown on picture)

enter image description here

1 Answers

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'
                }]
            }]
        }]
    }]
}]);
Related