3. Creating a Main Menu

In this step we will create the visual layout for our Main Menu.

On this page

Page no longer needed.

First bit of business is to create the layout of our Main Menu which we will do below.

  1. Open your MainMenu Widget Blueprint.

  2. On the Designer tab, drag and drop widgets from the Palette onto the Hierarchy to achieve the setup below.


    For reference we have an Image, a Vertical Box with Text and 3 Buttons that have Text on our Canvas Panel.

  3. Select the Vertical Box in the Hierarchy then Right-click and Copy it.

  4. Right-click on the Canvas Panel and select Paste to paste a second copy of the Vertical Box.


  5. In the new Vertical Box, Right-click copy a Button and paste it to create a fourth Button/Text widget.


  6. Select the first Vertical Box and in the Details panel, rename it to MainMenu, check the isVariable option and set ZOrder to 1.


    We are naming the widget for clarity and setting it to a variable so that we can access it as well as setting the ZOrder so that it appears on top of our image which we will set in a moment.

  7. Select the other Vertical Box and in the Details panel, rename it to Options, check the isVariable option and set ZOrder to 1.

  8. Rename each of the Buttons as shown in the image below.


    By updating the names of our buttons so that we know what each one does, this will make it easier to script functionality for them.

  9. Update each of the Text widgets as shown below via the Text section under Content in the Details panel.


    Here we are updating the text that is displayed on each of the buttons as well as the menu headers.

  10. Holding Ctrl select each of the Buttons then in the Details panel set a Tint color for Hovered and set each to Fill for Size.


    Here we are adjusting the size of all of our buttons as well as defining a color for the button to take when mousing over it.

  11. Select the Image in the Hierarchy then in the Details under Appearance and Brush, select a Texture, Sprite, or Material to use.


    If you want to use the same one as this guide, you can download it from here: Example Background

    Drag-and-drop the Example Background into Unreal Engine to import it (click Yes at any confirmation messages).

  12. In the Designer window, resize the image so that it takes up the entire layout.


  13. In the Details panel for the Image, click the Anchor button and choose the fill screen option. You can also use a Scalebox to hold the image, which will ensure that the image scales and resizes appropriately to match the aspect ratio.


  14. Select both Vertical Boxes and Anchor them to the left-center position.


  15. Select the Options Vertical Box and set its Visibility setting to Hidden.


    We do not want options to be shown by default, we will tell it to be visible through script.

  16. Select the MainMenu Vertical Box and resize and position it as desired in the Designer window.


  17. You can adjust the Font, Size and Alignment from the Details panel of each Text widget.


    You can experiment with these settings to get your desired effect.

  18. Setup your Options Vertical Box as desired then move it directly behind your Main Menu Vertical Box.


    Since only one of these will be visible at a time, it is okay that they overlap one another.

With the visual layout of our menu complete, in the next step we will script the menu's functionality.

Select Skin

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback