UE5 Horizontal Box UI

What You Will Learn

• How the Horizontal Box works in Unreal Engine UMG
• How to add a Horizontal Box inside a Canvas Panel
• How to create clean side-by-side UI columns
• How Fill and Auto sizing work in Horizontal Box slots
• How Fill Weight controls proportional space
• How to center text inside a row
• How to use padding for cleaner spacing
• How to nest a Vertical Box inside a Horizontal Box
• How to reorder children using the designer arrow handles
• Where Horizontal Box fits in real game UI design

What the Horizontal Box Does

The Horizontal Box is a UMG layout panel that arranges child widgets from left to right. Every child added to the Horizontal Box becomes part of the same row.

A basic Horizontal Box hierarchy looks like this:

Horizontal Box
  Text Block
  Text Block
  Text Block

This creates one row with three children. Each child has its own Horizontal Box Slot settings, which control size, alignment, and padding.

Why Horizontal Box Matters

If you manually place every row element on a Canvas Panel, your UI becomes fragile. It may look fine at one resolution, then break when the viewport changes or when you add more content.

Horizontal Box gives your UI structure. Instead of manually calculating X positions for each element, you let the layout container arrange children automatically.

This is exactly what you want for row-based UI.

Use Horizontal Box for:

• HUD status rows
• health, stamina, and ammo bars
• inventory item rows
• settings rows
• dialogue option rows
• scoreboard columns
• ability bars
• resource counters
• menu navigation bars
• button groups

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:

WBP_HorizontalBoxExample

Open the widget and use a Canvas Panel as the root.

The Canvas Panel acts as the outer screen placement container. The Horizontal Box will handle the internal row layout.

Step 2: Add a Horizontal Box

In the Palette panel, search for:

Horizontal Box

Drag it into the Canvas Panel.

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

Example values:

Position X = 450
Position Y = 400
Size X = 1000
Size Y = 250

This creates a wide row area that is large enough to hold multiple child widgets side by side.

For a more centered setup, you can also use center anchors and alignment values, but in this tutorial the focus is on demonstrating how the Horizontal Box behaves with children inside it.

Step 3: Add Text Blocks as Columns

Drag a Text Block into the Horizontal Box.

Change its text to:

Col One

Add another Text Block and change its text to:

Col Two

These Text Blocks now sit next to each other in a row.

This is the most basic Horizontal Box behavior. Add a widget, and it becomes the next item in the row.

Step 4: Use Fill Sizing for Equal Columns

Select one of the Text Blocks inside the Horizontal Box.

In the Details panel, look for the Horizontal Box Slot settings.

Set:

Size = Fill
Fill Ratio = 1.0

Do the same for the other Text Block.

When both children use Fill with the same Fill Ratio, they split the available width equally.

Col One Fill Ratio = 1
Col Two Fill Ratio = 1

Result:

Each column receives half of the available width.

How Fill Ratio Works

Fill Ratio, sometimes called Weight, controls how much space a child receives compared to other Fill children.

Equal weights create equal columns.

Column A = 1
Column B = 1
Column C = 1

This creates three equal columns.

Different weights create proportional columns.

Column A = 2
Column B = 1
Column C = 1

Column A receives twice as much width as Column B or Column C.

This is very useful for real UI, where one column may need more space than another.

Step 5: Reorder Children with Arrow Handles

When you select a child inside a Horizontal Box in the Designer, Unreal shows small arrow handles.

These arrows let you move the selected child left or right inside the row.

This is useful for quick visual editing. You do not need to drag items around in the hierarchy every time you want to test a different order.

For example, you can quickly move Col Two before Col One, then move it back again.

Step 6: Add a Centered Title

Add a third Text Block into the Horizontal Box.

Change its text to:

Title

Select the Title Text Block and configure its slot:

Size = Fill
Horizontal Alignment = Center
Vertical Alignment = Center

This makes the Title Text Block receive flexible space, then centers the actual text inside that space.

This is an important distinction. Fill controls the size of the slot. Alignment controls where the widget sits inside the slot.

Step 7: Add a Vertical Box as a Column

Now drag a Vertical Box into the Horizontal Box.

This creates a more advanced layout because you are nesting one layout panel inside another.

Your hierarchy now looks like this:

Horizontal Box
  Text Block
  Text Block
  Text Block
  Vertical Box

The Vertical Box becomes one column in the Horizontal Box.

Step 8: Add Text Blocks Inside the Vertical Box

Add five Text Blocks into the Vertical Box.

Example:

Item One
Item Two
Item Three
Item Four
Item Five

These Text Blocks stack vertically inside the fourth column.

This is a realistic UI pattern. A row may contain simple columns, but one column may itself contain a small vertical list.

Step 9: Add Padding to the Vertical Box Column

Select the Vertical Box inside the Horizontal Box.

In the Horizontal Box Slot settings, add padding.

Padding = 10

Padding creates breathing room around that column.

Without padding, UI elements often look cramped and cheap. A small amount of spacing can make a layout feel much more intentional.

Auto vs Fill Sizing

Horizontal Box children can use Auto or Fill sizing.

Auto means the child uses its desired size. For example, a Text Block will only take the space needed for its text.

Fill means the child expands to take available leftover space.

Use Auto when the content should stay compact.

Use Fill when the content should scale with the available row width.

Auto = content-sized
Fill = flexible space

Horizontal and Vertical Alignment

Each child inside the Horizontal Box has alignment controls.

Horizontal Alignment controls left, center, right, or fill behavior inside the slot.

Vertical Alignment controls top, center, bottom, or fill behavior inside the row height.

For centered text inside a row, use:

Horizontal Alignment = Center
Vertical Alignment = Center

This is especially useful for menu rows, labels, and stat displays.

Padding in Horizontal Box Slots

Padding adds spacing around a child widget.

Example:

Padding Left = 10
Padding Right = 10

This gives each column room so the content does not touch neighboring widgets.

Good spacing is not decoration. It directly affects readability.

Why Nested Layouts Are Important

Real UI is rarely built from one panel only. Good UMG layouts use nested containers, where each container has one clear responsibility.

Example:

Canvas Panel
  Border
    Horizontal Box
      Image Icon
      Vertical Box
        Text Title
        Text Description
      Button Action

In this structure:

• Canvas Panel places the UI on the screen.
• Border provides styling and padding.
• Horizontal Box creates the main row.
• Vertical Box stacks title and description.
• Button handles interaction.

This is how you build UI that is clean, readable, and easier to maintain.

Horizontal Box vs Vertical Box

Horizontal Box arranges widgets left to right.

Vertical Box arranges widgets top to bottom.

You will use both constantly.

Simple rule:

• Use Horizontal Box for rows.
• Use Vertical Box for columns or lists.
• Nest them together for real UI layouts.

Horizontal Box vs Canvas Panel

Canvas Panel gives manual screen placement. Horizontal Box gives automatic row layout.

Use Canvas Panel for major screen placement.

Use Horizontal Box when elements should sit next to each other in a controlled row.

A strong pattern is:

Canvas Panel
  Horizontal Box
    Icon
    Text
    Button

Horizontal Box vs Grid Panel

Horizontal Box is best for a single row.

Grid Panel is better when you need multiple rows and columns with exact cell placement.

Use Horizontal Box for simple row layouts. Use Grid Panel when the layout becomes table-like.

Horizontal Box vs Uniform Grid Panel

Horizontal Box lets each child have different width behavior.

Uniform Grid Panel makes cells evenly sized.

If you want flexible columns, use Horizontal Box. If every cell should be equal, use Uniform Grid Panel.

Practical Use Case: HUD Resource Row

A resource row might show gold, wood, stone, and population.

Horizontal Box
  Gold Icon + Text
  Wood Icon + Text
  Stone Icon + Text
  Population Icon + Text

Each resource block can be its own small widget, and the Horizontal Box arranges them cleanly across the top of the screen.

Practical Use Case: Inventory Item Row

An inventory row often contains an icon, item name, quantity, and action button.

Horizontal Box
  Item Icon
  Item Name
  Quantity Text
  Use Button

The item name can use Fill so it takes most of the row, while the icon, quantity, and button can use Auto.

That structure is far better than manually placing each element on a Canvas Panel.

Practical Use Case: Settings Row

Settings menus are perfect for Horizontal Box.

Horizontal Box
  Setting Label
  Slider or Dropdown

You can make the label Auto-sized and let the control use Fill, or split both evenly depending on your design.

Practical Use Case: Menu Button Row

Horizontal Box works well for bottom menu controls.

Horizontal Box
  Apply Button
  Reset Button
  Back Button

Set each button to Fill with equal weight if you want them evenly spaced.

Practical Use Case: Scoreboard Entry

A scoreboard row usually needs multiple columns.

Horizontal Box
  Player Name
  Kills
  Deaths
  Score

You can give the player name more Fill weight and keep the numbers smaller.

Player Name Weight = 3
Kills Weight = 1
Deaths Weight = 1
Score Weight = 1

Common Mistake: Using Manual Positions for Rows

If your content is meant to be in one row, do not manually position every child on a Canvas Panel.

It is slower to edit, harder to scale, and easier to break.

Use Horizontal Box for row layout.

Common Mistake: Forgetting Fill Weight

If columns are not distributing the way you expect, check the Fill Ratio.

A child set to Auto will not share space like a Fill child.

If you want equal columns, set all columns to Fill with the same weight.

Common Mistake: Not Centering Text

A Text Block can have a large slot but still appear stuck to one side if alignment is not configured.

For clean row labels, set alignment properly:

Horizontal Alignment = Center
Vertical Alignment = Center

Common Mistake: No Padding

UI without spacing looks rough. Even if the logic works, the design feels unfinished.

Add padding around row children to improve readability.

Padding = 10

Common Mistake: Using One Panel for Everything

A single Horizontal Box is not enough for complex UI. Do not force every layout into one row.

Use nesting:

Horizontal Box
  Image
  Vertical Box
    Title
    Description
  Button

That is a clean layout. Trying to fake this with manual positions is wasted time.

How to Make Row Widgets Reusable

For real projects, you should create reusable row widgets.

Example:

WBP_ItemRow
  Horizontal Box
    Image_ItemIcon
    Text_ItemName
    Text_Quantity
    Button_Use

Then expose variables such as:

• Item Name
• Item Icon
• Quantity
• Button Text

This lets you create item rows dynamically from data.

How to Add Horizontal Box Children Dynamically

You can add widgets to a Horizontal Box at runtime with Blueprints.

A common flow is:

1. Create a reusable child widget.
2. Create Widget from Blueprint.
3. Set its data.
4. Use Add Child to Horizontal Box.
5. Adjust slot settings if needed.

This is useful for dynamic ability bars, party member lists, quick slots, or resource counters.

Good Widget Hierarchies with Horizontal Box

Basic row:

Canvas Panel
  Horizontal Box
    Text Block
    Text Block
    Text Block

Inventory row:

Horizontal Box
  Image_Icon
  Vertical Box
    Text_Name
    Text_Description
  Text_Quantity
  Button_Use

Settings row:

Horizontal Box
  Text_Label
  Slider_Value
  Text_Number

HUD row:

Horizontal Box
  Health Widget
  Stamina Widget
  Ammo Widget
  Ability Bar

Design Tips for Horizontal Box UI

• Use Horizontal Box for left-to-right layout.
• Use Fill for flexible columns.
• Use Auto for compact icons, labels, and buttons.
• Use padding to prevent cramped layouts.
• Use Vertical Box inside Horizontal Box for title and description groups.
• Use consistent Fill weights for clean alignment.
• Do not manually position every row element on Canvas.
• Rename important widgets so the hierarchy stays readable.

How to Improve This Layout Later

Once the basic row works, you can improve the design with styling and interactivity.

Possible upgrades:

• Add a Border around the Horizontal Box
• Add hover effects to row elements
• Use icons instead of only text
• Add buttons or dropdowns
• Turn the row into a reusable widget
• Add animations for selection states
• Add controller and keyboard navigation
• Generate rows dynamically from arrays

Conclusion

In this tutorial, you learned how to use the Horizontal Box in Unreal Engine UMG to build clean row layouts. You added a Horizontal Box inside a Canvas Panel, created text-based columns, used Fill sizing for equal spacing, centered text inside slots, reordered children with arrow handles, and nested a Vertical Box to create a more realistic row structure.

Horizontal Box is one of the core layout tools you need for clean UI work in Unreal Engine. Use it whenever your interface needs side-by-side content. Stop manually placing row elements unless you have a specific reason. Horizontal Box is cleaner, faster, and easier to maintain.

Watch the full video tutorial: Horizontal Box in Unreal Engine UI – Build Clean Row 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 Horizontal Box in Unreal Engine UMG?

Horizontal Box is a UMG layout panel that arranges child widgets from left to right in a single row.

When should I use Horizontal Box?

Use Horizontal Box for HUD rows, button rows, inventory rows, settings rows, stat displays, ability bars, and any UI that needs side-by-side content.

What is the difference between Auto and Fill?

Auto uses the widget’s desired size. Fill expands the widget slot to share available space based on Fill Ratio.

How do I make equal columns in a Horizontal Box?

Set each child slot to Fill and give each one the same Fill Ratio, usually 1.0.

Can I put a Vertical Box inside a Horizontal Box?

Yes. This is a common pattern for creating a row where one column contains stacked content.

Should I use Horizontal Box or Canvas Panel?

Use Canvas Panel for screen-level placement. Use Horizontal Box for structured left-to-right layout inside that screen area.