Customizing Menubar

Topmost bar in pixie interface is called the menubar. It can be fully customized via configuration. You can hide it completely, add additional buttons or completely override default buttons.

Menubar is divided into three sections: left, center and right. You can place toolbar item in a particular section by specifying align option.

var pixie = new Pixie({
  ui: {
    menubar: {
      items: [
        {
          type: 'button', 
          label: 'Custom Action', 
          icon: HistoryIcon, 
          align: 'right', 
          action: function () {
            console.log('custom action!');
          }
        },
      ]
    }
  }
});

Replacing Default Items

If you want to replace default menubar items, use replaceDefaultItems option, if replaceDefaultItems is false, your custom items will be appended to default ones instead.
var pixie = new Pixie({
  ui: {
    menubar: {
      replaceDefaultItems: true,
      items: [
        {
          type: 'button',
          icon: FileDownloadIcon,
          label: 'Save',
        },
      ],
    },
  }
});

Adding Dropdown Menu

Menubar configuration also supports dropdown menus. The example below will add an open dropdown button.

var pixie = new Pixie({
  ui: {
    menubar: {
      items: [
        {
          type: 'button',
          icon: [
            {
              tag: 'path',
              attr: {
                d: 'M18 20H4V6h9V4H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2v9zm-7.79-3.17-1.96-2.36L5.5 18h11l-3.54-4.71zM20 4V1h-2v3h-3c.01.01 0 2 0 2h3v2.99c.01.01 2 0 2 0V6h3V4h-3z',
              },
            },
          ],
          align: 'left',
          menuItems: [
            {
              action: editor => {
                editor.tools.import.uploadAndReplaceMainImage();
              },
              label: 'Background Image',
            },
            {
              action: editor => {
                editor.tools.import.uploadAndAddImage();
              },
              label: 'Overlay Image',
            },
            {
              action: editor => {
                editor.tools.import.uploadAndOpenStateFile();
              },
              label: 'Editor Project File',
            },
          ]
        },
      ]
    }
  }
});

If you want to show your custom logo in the toolbar, you can use "image" toolbar item type.

var pixie = new Pixie({
  ui: {
    menubar: {
      items: [
        {
          type: 'image',
          src: 'https://url-to-your-logo.png',
        },
      ]
    }
  }
});

More Options

This page contains only a few most common usage examples. All available options for toolbar items can be found here.