UE5 Scroll Box UI

What You Will Learn

• What the Scroll Box widget does in Unreal Engine UMG
• How to add and position a Scroll Box inside a Widget Blueprint
• How to use a Vertical Box inside Scroll Box for list-style content
• How to add, duplicate, and style simple UI items
• How automatic scrolling works when content exceeds the visible area
• How to customize scroll orientation and scrollbar behavior
• How to style the scrollbar for a cleaner UI look
• Where Scroll Box is useful in real game interfaces

What the Scroll Box Widget Does

Scroll Box is a UMG container that allows content to scroll when it becomes larger than the visible widget area.

Without a Scroll Box, overflowing UI content either gets clipped, overlaps other widgets, or forces you to create ugly layout workarounds. With Scroll Box, the visible area stays controlled while the content inside can continue beyond that area.

In simple terms:

• The Scroll Box defines the visible window.
• The child widgets inside it define the scrollable content.
• When the content is larger than the visible window, scrolling becomes available.

When You Should Use Scroll Box

Use Scroll Box whenever the number of UI elements can grow beyond the screen space available.

Good examples include:

• inventory item lists
• settings menus
• chat windows
• quest logs
• save and load slots
• server browser lists
• crafting recipe lists
• achievement panels
• shop product lists
• tutorial or help menus

If you are manually trying to fit twenty widgets into a fixed panel without scrolling, stop. That is exactly the situation Scroll Box is designed to solve.

Step 1: Create a Widget Blueprint

Start by creating a Widget Blueprint.

In the Content Drawer:

Right-click → User Interface → Widget Blueprint

Name it something clear, for example:

WBP_ScrollBoxExample

Open the widget and make sure it has a Canvas Panel as the root.

A Canvas Panel is useful for this beginner setup because it gives direct control over position and size while learning the Scroll Box behavior.

Step 2: Add the Scroll Box

In the Palette panel, search for:

Scroll Box

Drag the Scroll Box into the Canvas Panel.

Select the Scroll Box and configure its Canvas Panel slot settings.

Example settings:

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

This creates a centered scrollable area with a clear fixed size.

Why the Scroll Box Needs a Clear Size

A Scroll Box only becomes meaningful when it has a visible area to constrain content.

If the Scroll Box has no proper size, it may expand with its content or behave in a way that makes scrolling unclear. Setting a fixed size while learning makes the behavior easy to understand.

In real projects, the size may come from anchors, parent containers, responsive layout rules, or screen resolution scaling. But the core idea stays the same: the Scroll Box controls the visible region.

Step 3: Add a Vertical Box Inside the Scroll Box

Search for:

Vertical Box

Drag the Vertical Box into the Scroll Box.

The Vertical Box will act as the list container. Every item you add inside it will stack vertically.

This is a clean pattern:

Scroll Box
  Vertical Box
    Item
    Item
    Item

Why Use Vertical Box Inside Scroll Box

Scroll Box handles scrolling. Vertical Box handles item stacking.

This separation is important. The Scroll Box should not be treated like a random dumping area for manually placed widgets. Let a layout container manage the children properly.

Vertical Box is the right choice when you want a clean vertical list. For different layouts, you can use other containers, but for a basic scrollable menu or list, Vertical Box is the most direct setup.

Step 4: Add an Image Item

Inside the Vertical Box, add an Image widget.

Select the Image and adjust its desired size.

Example:

Desired Size X = 32
Desired Size Y = 150

You can use a larger width if you want the item to look more like a list row. The tutorial uses simple image blocks to demonstrate scrolling clearly.

Step 5: Duplicate the Items

Select the Image widget and duplicate it several times.

Shortcut:

Ctrl + D

Create around five or more items.

Change each Image color so the scrollable list is easier to read visually.

Example colors:

• red
• blue
• green
• purple
• yellow

Step 6: Understand the Automatic Scroll Behavior

Once the content inside the Scroll Box becomes taller than the visible Scroll Box area, Unreal automatically makes it scrollable.

You do not need Blueprint code for basic scrolling.

The user can normally scroll using:

• mouse wheel
• scrollbar dragging
• touch or controller behavior depending on your input setup

This is why Scroll Box is so useful. It gives you overflow handling without building a custom scroll system from scratch.

Step 7: Preview the Scroll Box

Compile the widget and preview it.

You should see only part of the list at once. When you scroll, the hidden items become visible.

If all items are visible at once, your Scroll Box is probably too large or your content is too small to overflow.

Step 8: Customize Scroll Orientation

Select the Scroll Box and open the Details panel.

Look for the scroll orientation setting.

Common options are:

• Vertical
• Horizontal

Vertical scrolling is the default for lists. Horizontal scrolling is useful for things like carousel menus, horizontal inventories, ability bars, or card rows.

Step 9: Customize Scrollbar Visibility

Scrollbar visibility controls when the scrollbar appears.

Typical options include:

• Always visible
• Visible only when needed
• Hidden

For debugging, visible scrollbars are useful. For final UI, you may choose a cleaner style depending on your design.

Step 10: Adjust Scrollbar Thickness and Padding

Scrollbar thickness affects how large the scrollbar appears.

Padding controls how much spacing exists around the scrollbar.

These settings matter because the scrollbar is part of the user experience. If it is too thin, it becomes hard to grab. If it is too thick, it steals space from the content.

Step 11: Configure Overscroll and Wheel Animation

Scroll Box includes interaction settings that affect how scrolling feels.

Useful options include:

• Allow Overscroll: lets the scroll motion move slightly beyond the content bounds, often useful for a softer feel.
• Animate Wheel Scroll: makes mouse wheel movement smoother instead of jumping abruptly.

These are small settings, but small UI feel improvements matter. Bad scrolling makes menus feel cheap.

Step 12: Style the Scrollbar

In the Scroll Box details, find the style section for the scrollbar.

You can customize:

• scrollbar background
• scrollbar thumb
• hover state
• dragged state
• colors and brushes

This is where you can make the scrollbar match your game UI instead of looking like a default placeholder.

Why Scrollbar Styling Matters

Default UI elements are fine for testing, but they rarely look polished in a final game.

A styled scrollbar helps your UI feel intentional and consistent with the rest of the interface.

If your menu has a dark sci-fi theme but your scrollbar looks like a generic editor widget, the player will notice. Maybe not consciously, but the UI will feel unfinished.

Step 13: Use Scroll Box with More Than Images

The tutorial demonstrates Images because they are fast to duplicate and easy to see. But Scroll Box can contain any widget.

You can add:

• Text Blocks
• Buttons
• Horizontal Boxes
• Vertical Boxes
• Inventory slot widgets
• chat message widgets
• setting row widgets
• custom user widgets

That is where Scroll Box becomes truly powerful.

Common Scroll Box Hierarchies

For a simple vertical list:

Scroll Box
  Vertical Box
    WBP_ListItem
    WBP_ListItem
    WBP_ListItem

For a horizontal carousel:

Scroll Box
  Horizontal Box
    WBP_Card
    WBP_Card
    WBP_Card

For a scrollable inventory grid:

Scroll Box
  Uniform Grid Panel
    WBP_ItemSlot
    WBP_ItemSlot
    WBP_ItemSlot

For wrapping content:

Scroll Box
  Wrap Box
    WBP_ItemCard
    WBP_ItemCard
    WBP_ItemCard

Scroll Box for Inventory UI

Scroll Box is useful for inventory systems when the player can own more items than the visible inventory panel can show.

A good inventory setup often uses:

• Scroll Box for overflow
• Uniform Grid Panel or Wrap Box for layout
• custom item slot widgets for each item
• data-driven item population through Blueprint

The Scroll Box handles visibility and movement. The grid or wrap layout handles item placement.

Scroll Box for Chat UI

Chat windows are another strong use case.

Each message can be a custom widget added to a Vertical Box inside the Scroll Box. As new messages arrive, the list grows and the player can scroll through previous messages.

For a real chat system, you would usually add auto-scroll behavior when new messages arrive, but the base layout still begins with Scroll Box.

Scroll Box for Settings Menus

Settings menus often contain more options than fit on one screen.

A Scroll Box lets you build a clean menu where rows can include:

• labels
• sliders
• checkboxes
• dropdowns
• keybinding buttons

This is much better than shrinking everything until it becomes unreadable.

Scroll Box vs TileView

Scroll Box is best when you want direct control over child widgets and layout containers.

TileView is better when you have a large object-based data list that should generate entries dynamically in a grid-like layout.

Simple rule:

• Use Scroll Box for simple scrollable content containers.
• Use TileView or ListView for more data-driven item lists with entry widgets.

Do not force Scroll Box to do everything. Pick the correct widget for the job.

Common Mistake: Not Adding a Layout Container Inside Scroll Box

Beginners often add random widgets directly into the Scroll Box and then wonder why the layout becomes annoying.

Use a layout container inside the Scroll Box.

For vertical lists, use Vertical Box. For grids, use Uniform Grid Panel. For wrapping layouts, use Wrap Box.

The Scroll Box should handle scrolling, not every detail of item layout.

Common Mistake: Scroll Box Does Not Scroll

If your Scroll Box does not scroll, check:

• Is the content larger than the visible Scroll Box area?
• Does the Scroll Box have a fixed or constrained size?
• Are the child widgets actually inside the Scroll Box?
• Is the orientation correct?
• Is scrollbar visibility hidden?

Most of the time, the content simply does not exceed the Scroll Box bounds, so there is nothing to scroll.

Common Mistake: Items Look Stretched or Compressed

If the list items look wrong, inspect the slot settings of the child widgets.

Inside layout containers, each widget has layout rules. Fill, Auto, size overrides, padding, and alignment can all affect the result.

Do not blame Scroll Box immediately. Usually the issue is in the child container or child widget slot settings.

Common Mistake: Ugly Scrollbar

Default scrollbar styling is fine while learning, but it can look unfinished in a real game.

Before shipping, customize:

• scrollbar color
• thumb brush
• background brush
• thickness
• padding

UI polish matters. The scrollbar is part of the interface, not an afterthought.

Performance Note

Scroll Box is great for moderate amounts of content, but if you are displaying a very large data set, you should consider ListView or TileView instead.

Why? ListView and TileView are designed for generated entry widgets and larger item collections. Scroll Box with hundreds of manually added child widgets can become inefficient and harder to manage.

Use Scroll Box when the content size is reasonable or when you need direct layout control. Use data-driven list widgets when the item count grows large.

How to Expand This Example

Once the basic Scroll Box works, you can expand it into real UI systems:

• Create custom list item widgets.
• Add buttons to each row.
• Populate the list dynamically from an array.
• Add icons, labels, and descriptions.
• Build inventory rows or item cards.
• Add selection and hover styling.
• Create auto-scroll behavior for chat windows.

Conclusion

In this tutorial, you learned how to use the Scroll Box widget in Unreal Engine UMG to build a scrollable UI section. You added a Scroll Box, placed a Vertical Box inside it, duplicated multiple image items, tested automatic scrolling, and explored customization options such as orientation, scrollbar visibility, overscroll, wheel animation, and scrollbar styling.

Scroll Box is one of the most practical UI widgets in Unreal Engine. Use it whenever your content can exceed the visible area and you need a clean, controlled way to let the player browse through it.

Watch the full video tutorial: Scroll Box in Unreal Engine UI – Effortless Scrollable Menus and Lists

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 Scroll Box in Unreal Engine UMG?

Scroll Box is a UMG container that allows content to scroll when the child widgets exceed the visible area of the widget.

Do I need Blueprint code to make Scroll Box work?

No. Basic scrolling works automatically when the content is larger than the visible Scroll Box area.

What should I put inside a Scroll Box?

Usually you should place a layout container inside it, such as Vertical Box, Horizontal Box, Uniform Grid Panel, or Wrap Box, then add your items inside that container.

Can Scroll Box be horizontal?

Yes. You can change the orientation from vertical to horizontal in the Scroll Box settings.

Why is my Scroll Box not scrolling?

Most likely the content is not larger than the Scroll Box visible area, the Scroll Box has no constrained size, or the layout inside it is not configured correctly.

Should I use Scroll Box for huge inventories?

For small or moderate inventories, Scroll Box can work. For large dynamic item sets, TileView or ListView is usually a better long-term choice.