UE5 Vertical Box UI

What You Will Learn

• How the Vertical Box works in Unreal Engine UMG
• How to center a Vertical Box using anchors and alignment
• How to stack Text widgets vertically
• How to use Fill and Weight to distribute space evenly
• How to center widgets horizontally and vertically inside rows
• How to nest a Horizontal Box inside a Vertical Box
• How to build clean row-based UI layouts
• When to use Vertical Box instead of Canvas Panel
• Common layout mistakes to avoid

What the Vertical Box Does

The Vertical Box is a layout container that places child widgets one after another from top to bottom. Every child inside the Vertical Box gets its own slot settings, which control size behavior, alignment, padding, and layout contribution.

A simple Vertical Box hierarchy looks like this:

Vertical Box
  Text Block
  Text Block
  Text Block

Each Text Block becomes one row. You can make each row use automatic size, fixed content size, or Fill mode to share available space.

Why Vertical Box Is Important

Beginners often build UI by manually placing everything on a Canvas Panel. That works for quick tests, but it becomes painful when you need consistent spacing, scalable layouts, or clean alignment.

Vertical Box solves this by making layout structure clear. Instead of manually positioning each row, you let the container handle stacking.

Use Vertical Box when your UI has a clear top-to-bottom structure, such as:

• main menu buttons
• settings rows
• dialogue choices
• quest objective lists
• stat panels
• pause menu sections
• inventory category lists
• scoreboard entries
• tutorial instruction panels

Step 1: Create a Widget Blueprint

Start by creating a new Widget Blueprint.

In the Content Drawer:

Right-click → User Interface → Widget Blueprint

Name it something clear, for example:

WBP_VerticalBoxExample

Open the widget and make sure the root widget is a Canvas Panel.

The Canvas Panel is useful as the outer screen-level container. It lets you position the main Vertical Box on the screen, while the Vertical Box handles the internal row layout.

Step 2: Add the Vertical Box

In the Palette panel, search for:

Vertical Box

Drag it into the Canvas Panel.

Select the Vertical Box and configure its Canvas Panel Slot settings.

Example values:

Anchor = Center
Position X = 0
Position Y = 0
Size X = 500
Size Y = 600
Alignment X = 0.5
Alignment Y = 0.5

This places the Vertical Box in the center of the screen and gives it a clean test area.

Why Anchor and Alignment Matter

Anchor defines which part of the parent canvas the widget is attached to. Position defines the offset from that anchor. Alignment defines which part of the widget is placed on that position.

If you set the Anchor to center and the Position to zero, but leave Alignment at zero, the top-left corner of the Vertical Box will sit at the center. That is not usually what you want.

Setting Alignment X and Y to 0.5 means the center of the Vertical Box is placed at the center anchor.

Alignment 0.5, 0.5 = center pivot

Step 3: Add Text Rows

Drag three Text Block widgets into the Vertical Box.

Rename their displayed text:

Row One
Row Two
Row Three

Now the Vertical Box stacks these Text Blocks from top to bottom.

At this point, the rows may only take the space required by their text. That is normal. Next, you will change their slot settings so they distribute space evenly.

Step 4: Set Each Row to Fill

Select the first Text Block inside the Vertical Box.

In the Slot settings, change Size from Auto to Fill.

Set the Fill Ratio, also called Weight, to:

1.0

Repeat this for all three Text Blocks.

Now each row receives an equal share of the available height.

How Fill and Weight Work

Fill tells the Vertical Box that the child should take part in filling available space. Weight controls how much space that child receives compared to the others.

If all three rows have Weight 1.0, the space is split equally.

Row One Weight = 1
Row Two Weight = 1
Row Three Weight = 1

The result is:

Each row gets one third of the available height.

If one row has Weight 2.0 while the others have Weight 1.0, that row gets more space.

Row One Weight = 2
Row Two Weight = 1
Row Three Weight = 1

This means Row One receives twice as much space as Row Two or Row Three.

Step 5: Center the Text in Each Row

Select each Text Block and configure its Vertical Box Slot alignment.

Use:

Horizontal Alignment = Center
Vertical Alignment = Center

This centers the Text Block inside its allocated row space.

This is an important distinction. Fill controls how much row space the widget receives. Alignment controls where the widget content sits inside that slot.

Step 6: Add a Horizontal Box Inside the Vertical Box

Now add a Horizontal Box into the Vertical Box under the three text rows.

The hierarchy becomes:

Vertical Box
  Text Block
  Text Block
  Text Block
  Horizontal Box

This demonstrates nested layout. The Vertical Box handles the main top-to-bottom structure, and the Horizontal Box handles a left-to-right row inside that structure.

Step 7: Add Text Widgets Inside the Horizontal Box

Drag three Text Block widgets into the Horizontal Box.

Example labels:

Left
Center
Right

Select each child inside the Horizontal Box and set:

Size = Fill
Weight = 1.0
Horizontal Alignment = Center
Vertical Alignment = Center

This evenly distributes the three text blocks across the horizontal row.

Why Nest Horizontal Box Inside Vertical Box?

Most real UI is not only vertical or only horizontal. It is usually a combination of both.

For example, a settings menu might be structured like this:

Vertical Box
  Row: Display Mode
  Row: Resolution
  Row: Brightness
  Horizontal Box: Apply, Reset, Back

The Vertical Box creates the main menu structure. The Horizontal Box creates a button row at the bottom.

This is how you build scalable UI without manually positioning every widget.

Step 8: Reorder Elements Quickly

Unreal Engine allows you to reorder widgets inside layout containers using the hierarchy or the small arrow controls in the designer.

In a Vertical Box, you can move rows up or down.

In a Horizontal Box, you can move children left or right.

This is useful when you are testing UI layouts and want to rearrange elements without rebuilding the hierarchy.

Vertical Box vs Canvas Panel

Canvas Panel is for screen-level positioning. Vertical Box is for structured layout.

Use Canvas Panel when you need to place major UI sections on the screen.

Use Vertical Box when child widgets should stack from top to bottom.

A good pattern is:

Canvas Panel
  Vertical Box
    Menu Button
    Menu Button
    Menu Button

The Canvas places the menu. The Vertical Box organizes the buttons.

Vertical Box vs Horizontal Box

Vertical Box stacks widgets top to bottom.

Horizontal Box stacks widgets left to right.

You should not think of one as better than the other. They solve different layout directions.

In real projects, you usually combine them.

Vertical Box vs Grid Panel

Vertical Box is best for simple ordered rows.

Grid Panel is better when you need rows and columns with more control.

Simple rule:

• Use Vertical Box for one-dimensional top-to-bottom layouts.
• Use Grid Panel for two-dimensional row and column layouts.

Vertical Box vs Scroll Box

Vertical Box does not automatically scroll. If the content becomes taller than the visible area, it may overflow or be clipped depending on the parent layout.

If you need a scrollable vertical list, place a Vertical Box inside a Scroll Box.

Scroll Box
  Vertical Box
    Item Row
    Item Row
    Item Row

This is a common setup for inventory lists, chat logs, quest logs, and settings menus.

Practical Use Case: Main Menu

A main menu is one of the best examples for Vertical Box.

Vertical Box
  Play Button
  Options Button
  Credits Button
  Quit Button

Each button can be set to Auto if you want it to use only its natural size, or Fill if you want the buttons distributed across the menu area.

Practical Use Case: Settings Screen

Settings screens usually contain rows of options.

A clean structure might look like this:

Vertical Box
  Horizontal Box: Resolution Label + Dropdown
  Horizontal Box: Quality Label + Dropdown
  Horizontal Box: Music Volume + Slider
  Horizontal Box: Apply Button + Back Button

This combines Vertical Box for the list and Horizontal Box for each individual setting row.

Practical Use Case: HUD Info Stack

Vertical Box is useful for stacking HUD information.

Vertical Box
  Health Text
  Ammo Text
  Objective Text
  Warning Text

This keeps the HUD organized and easier to update later.

Practical Use Case: Dialogue Choices

Dialogue choices are usually stacked vertically.

Vertical Box
  Choice One
  Choice Two
  Choice Three

You can dynamically add choices to the Vertical Box at runtime based on the current conversation.

Common Mistake: Using Canvas for Every Row

If you manually place every row in a Canvas Panel, your UI becomes harder to maintain.

When you add or remove one row, you may need to reposition everything manually.

Vertical Box avoids that problem because rows automatically stack.

Common Mistake: Forgetting Fill Settings

If your rows are not distributing evenly, check the Slot Size setting.

Auto means the widget uses its desired size.

Fill means the widget participates in sharing available space.

Common Mistake: Confusing Alignment and Anchors

Anchor controls where the container is placed relative to its parent.

Alignment controls the pivot point of the container or child widget.

Slot alignment controls how a child sits inside its parent layout space.

These are different concepts. Mixing them up is one of the most common beginner UI problems.

Common Mistake: Not Nesting Layouts

Beginners often try to solve everything with one panel. That is not how good UMG layouts are built.

Real UI uses nested panels.

Example:

Canvas Panel
  Border
    Vertical Box
      Text Block
      Horizontal Box
        Button
        Button

Each panel has a job. Canvas places the UI. Border styles it. Vertical Box stacks sections. Horizontal Box arranges buttons.

How to Add Rows Dynamically

In real projects, you may not manually add every row. You may generate rows from data.

The basic Blueprint flow is:

1. Create a custom row widget, such as WBP_MenuRow.
2. Create or load an array of data.
3. Loop through the array.
4. Create Widget for each row.
5. Set the row data.
6. Add Child to Vertical Box.

This is useful for dynamic menus, dialogue options, inventory lists, quest logs, or server browser entries.

Good Widget Hierarchies with Vertical Box

Simple menu:

Canvas Panel
  Vertical Box
    Button_Play
    Button_Options
    Button_Quit

Styled menu panel:

Canvas Panel
  Border
    Vertical Box
      Text_Title
      Button_Play
      Button_Options
      Button_Quit

Settings screen:

Canvas Panel
  Border
    Vertical Box
      Horizontal Box
        Text_Label
        Slider
      Horizontal Box
        Text_Label
        ComboBox
      Horizontal Box
        Button_Apply
        Button_Back

Design Tips for Vertical Box UI

• Use Vertical Box for top-to-bottom structure.
• Use Horizontal Box inside Vertical Box for row content.
• Use Fill for equal distribution.
• Use Auto when the widget should keep its natural size.
• Use padding to add breathing room between rows.
• Do not manually position every row on a Canvas Panel.
• Rename important widgets to keep the hierarchy readable.
• Use reusable row widgets for dynamic UI systems.

How to Improve This Layout Later

Once the basic structure works, you can improve it with styling and reusable widgets.

Possible upgrades:

• Add a Border around the Vertical Box
• Add padding between rows
• Replace Text Blocks with Buttons
• Create reusable row widgets
• Add hover animations
• Add UI sounds
• Add keyboard or gamepad navigation
• Put the Vertical Box inside a Scroll Box for long lists

Conclusion

In this tutorial, you learned how to use the Vertical Box in Unreal Engine UMG to create clean row-based layouts. You centered a Vertical Box inside a Canvas Panel, added Text Blocks as rows, used Fill and Weight to distribute space evenly, centered each row’s content, and nested a Horizontal Box inside the Vertical Box for a more advanced layout.

This is one of the core layout patterns you need for clean Unreal Engine UI. Stop manually placing every element on a Canvas Panel when the layout should be structured. Use Vertical Box for stacked rows, Horizontal Box for inline groups, and combine them to build scalable UI.

Watch the full video tutorial: Vertical Box in Unreal Engine UI – Clean Rows with Centered Layouts

More Unreal Engine UI tutorials: rambod.net

Subscribe for more Unreal Engine tutorials: Subscribe to Rambod on YouTube

Resources

• YouTube Tutorial
• More Unreal Engine Tutorials
• Rambod Dev YouTube Channel

Frequently Asked Questions

What is Vertical Box in Unreal Engine UMG?

Vertical Box is a UMG layout panel that stacks child widgets from top to bottom.

When should I use Vertical Box?

Use Vertical Box for menus, settings screens, dialogue choices, stacked HUD elements, quest lists, and any UI that needs clean vertical structure.

What is the difference between Auto and Fill?

Auto uses the widget’s desired size. Fill shares available space based on Weight.

How do I center widgets inside a Vertical Box?

Select the child widget and set its Vertical Box Slot alignment to Center horizontally and Center vertically.

Can I put a Horizontal Box inside a Vertical Box?

Yes. This is a normal and useful pattern for building rows with left-to-right content inside a top-to-bottom layout.

Should I use Vertical Box or Canvas Panel?

Use Canvas Panel for screen-level positioning. Use Vertical Box for stacked internal layout.