4 Min. read

Adding Custom Buttons to the Unreal Editor Toolbars and Menus

Customizing the Unreal Editor to fit your project’s needs is very easy and can provide an important productivity boost for developers, artists and designers.

In this post we’ll go through the process of adding a custom editor button to the main editor toolbar and an entry to the Select menu (but the process is the same for any toolbar and menu).

Even if they ultimately look quite different, both menus and toolbars in Unreal are built using the same building blocks in C++ (most of which are located inside the ToolMenus module). In this post I’m going to use the two words interchangeably.

All menus in the Unreal Editor are uniquely identified by a name. Each menu is divided into sections, with each section also being identified by an unique name.

In order to find out the name of the menu and section we’d like to extend, we can enable the Display UI Extension Points setting in the Editor Preferences.

A screenshot of the Unreal Editor preferences showing the Display UI Extension Points checkbox

The names of the sections will immediately be visible after restarting the editor:

A screenshot of the Unreal Editor with Display UI Extension Points checkbox enabled, showing UI extension points

There are multiple ways to find out the name of a specific menu, but the easiest is entering the ToolMenus.Edit command in the Cmd input box in the bottom toolbar.

A screenshot of the Unreal Editor command line with the ToolMenus.Edit command entered

This will make the menu names appear in the UI.

A screenshot of the Unreal Editor after entering the ToolMenus.Edit command showing additional buttons in the UI

The same command also adds new buttons to the UI. Clicking on them will open a window from which menu names can be easily copy-pasted.

A screenshot of the window that opens after clicking the new buttons, with the menu name visible in a text box

Adding a toolbar button

For this example we’re going to add an entry to the File section of the main editor toolbar, LevelEditor.LevelEditorToolBar.ModesToolBar.

  1. First, let’s create a new editor module by adding the relevant configuration into the .uproject or .uplugin file:
{
    "Modules": [
        {
            "Name": "MyEditorModule",
            "Type": "Editor",
            "LoadingPhase": "Default"
        }
    ]
}
  1. Then let’s create the module .Build.cs file and add the required dependencies:
using UnrealBuildTool;
 
public class MyEditorModule : ModuleRules
{
    public MyEditorModule(ReadOnlyTargetRules Target) : base(Target)
    {
        PCHUsage = ModuleRules.PCHUsageMode.UseExplicitOrSharedPCHs;
 
        PrivateIncludePaths.Add("MyEditorModule");
 
        PrivateDependencyModuleNames.AddRange(new[]
        {
            "Core",
            "Slate",
            "SlateCore",
            "ToolMenus",
        });
    }
}
  1. Finally, let’s create the editor module implementation and extend the toolbar:
#include "Modules/ModuleManager.h"
#include "ToolMenus.h"
 
class FMyEditorModule : public IModuleInterface
{
    void StartupModule() override
    {
        // Register a function to be called when menu system is initialized
        UToolMenus::RegisterStartupCallback(FSimpleMulticastDelegate::FDelegate::CreateRaw(
            this, &FMyEditorModule::RegisterMenuExtensions));
    }
 
    void RegisterMenuExtensions()
    {
        // Use the current object as the owner of the menus
        // This allow us to remove all our custom menus when the 
        // module is unloaded (see ShutdownModule below)
        FToolMenuOwnerScoped OwnerScoped(this);
 
        // Extend the "File" section of the main toolbar
        UToolMenu* ToolbarMenu = UToolMenus::Get()->ExtendMenu(
            "LevelEditor.LevelEditorToolBar.ModesToolBar");
        FToolMenuSection& ToolbarSection = ToolbarMenu->FindOrAddSection("File");
 
        ToolbarSection.AddEntry(FToolMenuEntry::InitToolBarButton(
            TEXT("MyCustomButtonName"),
            FExecuteAction::CreateLambda([]()
            {
                // Do something when the button is clicked
            }),
            INVTEXT("My custom button"),
            INVTEXT("Tooltip for my custom button")
        ));
    }
 
    void ShutdownModule() override
    {
        // Unregister the startup function
        UToolMenus::UnRegisterStartupCallback(this);
 
        // Unregister all our menu extensions
        UToolMenus::UnregisterOwner(this);
    }
};
 
IMPLEMENT_MODULE(FMyEditorModule, MyEditorModule)

And here’s the result:

A screenshot of the Unreal Editor with the new button visible in top toolbar

Using a custom icon

Of course it would be nice to show a custom icon for our button. For the sake of this tutorial we’re going to use one of the icons that come with the engine.

My suggestion is to use the free Slate Icon Browser plugin to easily browse all the icons available in the engine. Double clicking an icon will copy the required C++ code to the clipboard.

A screenshot of the Slate Icon Browser plugin window, showing all available icons

Let’s use the Comment icon:

void RegisterMenuExtensions()
{
    // ...
 
    ToolbarSection.AddEntry(FToolMenuEntry::InitToolBarButton(
        "MyCustomButtonName",
        FExecuteAction::CreateLambda([]()
        {
            // Do something when the button is clicked
        }),
        INVTEXT("My custom button"),
        INVTEXT("Tooltip for my custom button"),
        FSlateIcon(FAppStyle::GetAppStyleSetName(), "Icons.Comment")
    ));
}

And we’re done!

A screenshot of the Unreal Editor with the new button visible in top toolbar, showing a custom icon

Adding a custom menu item

Let’s expand on what we’ve done above and also add a new custom section and entry to the Select menu.

void RegisterMenuExtensions()
{
    // ...
 
    // Add a new section to the Select menu right after the "BSP" section
    UToolMenu* SelectionMenu = UToolMenus::Get()->ExtendMenu("LevelEditor.MainMenu.Select");
    FToolMenuSection& SelectionSection = SelectionMenu->AddSection(
        "MyCustomSection",
        INVTEXT("My Custom Section"),
        FToolMenuInsert("SelectBSP", EToolMenuInsertType::After)
    );
 
    SelectionSection.AddEntry(FToolMenuEntry::InitMenuEntry(
        "MyCustomEntryName",
        INVTEXT("My custom entry"),
        INVTEXT("Tooltip for my custom entry"),
        FSlateIcon(),
        FExecuteAction::CreateLambda([]()
        {
            // Do something when the entry is clicked
        })
    ));
}

And there we go:

A screenshot of the Unreal Editor Select menu, with our custom menu entry visible

Additional resources