Scroll Box in Unreal Engine UI – Effortless Scrollable Menus and Lists

Learn how to use the Scroll Box widget in Unreal Engine to build clean, scrollable menus, lists, and inventories with full customization.

This is Rambod, and today we’re learning the Scroll Box widget in Unreal Engine UI.
The Scroll Box is essential whenever your content might exceed the visible space. With it, you can build scrollable lists, menus, inventories, or chat windows with very little effort.

By the end, you’ll know how to:
✅ Set up and position a Scroll Box
✅ Use a Vertical Box to hold dynamic list items
✅ Duplicate and style elements quickly
✅ Configure scroll behavior and orientation
✅ Customize scrollbar visuals for polish
✅ Combine Scroll Box with other panels for advanced UI

1) Adding the Scroll Box

1. Start with a Canvas Panel as your root.
2. Drag in a Scroll Box.

Configure slot (Canvas Panel Slot):

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

👉 This centers the Scroll Box in your UI and defines its visible area.

2) Adding a Vertical Box Inside

• Drop a Vertical Box into the Scroll Box.
• Set its slot to Fill → ensures it stretches to take available width.

💡 The Vertical Box acts as a list container — it makes item duplication simple.

3) Creating List Items

• Drag in an Image Widget into the Vertical Box.
• Under Appearance → Desired Size, set 32 × 150.

Now duplicate it:

• Select the Image → press Ctrl + D → repeat until you have ~5 items.
• Change each item’s Color & Opacity for visual clarity (e.g., red, blue, green, purple, yellow).

👉 Only a few will fit inside the visible frame. The Scroll Box automatically shows a scrollbar when content exceeds the area.

4) How the Scroll Box Works

• Hit Play → the list is scrollable by:
  • Mouse wheel
  • Dragging the scrollbar

This behavior is automatic — no extra Blueprint code needed.

5) Customizing Scroll Behavior

Select the Scroll Box and look under the Details → Scroll section:

• Orientation → Vertical (default) or Horizontal.
• Scrollbar Visibility → Always, Auto, or Hidden.
• Scrollbar Thickness & Padding → Adjust size and spacing.
• Allow Overscroll → Enable extra bounce-like scrolling.
• Animate Wheel Scroll → Smooths the scroll action.

👉 These options let you fine-tune interaction to feel natural for your game.

6) Styling the Scrollbar

Scroll further down → Style → Bar Style.
Here you can tweak:

• Background brush (track look)
• Thumb brush (the draggable handle)
• Hover & Drag states

💡 Matching your scrollbar to your game’s UI theme adds polish and immersion.

7) Expanding the Use Cases

The Scroll Box isn’t just for simple lists. You can:

• Place Text Blocks for chat logs
• Nest a Uniform Grid Panel for scrollable inventories
• Wrap a Wrap Box inside it for dynamic, flowing item lists
• Use Buttons, sliders, or full panels inside to create settings menus

👉 Basically, any widget can live inside a Scroll Box — making it a universal tool for overflow content.

Subtitle Expansion (Full Tutorial Flow)

“Start with a Canvas Panel, add a Scroll Box, center it, size 500×400, align 0.5×0.5. Add a Vertical Box inside the Scroll Box and set it to Fill. Drop an Image widget, size it to 32×150, then duplicate it five times with Ctrl + D. Change each to a unique color for clarity. Notice that only a few items fit → a scrollbar appears automatically. In Details → Scroll, adjust orientation, scrollbar visibility, overscroll, and animation. Scroll down to Style → Bar Style, where you can tweak background, thumb, and hover visuals. Hit Play → scroll with mouse wheel or drag. You’re not limited to images — add text, buttons, or grids inside. Scroll Box is perfect for inventories, chat, or any list longer than the viewport.”

Wrap-Up

The Scroll Box is one of the most versatile UI containers in Unreal Engine:

• Auto-handles overflow content
• Works with any child widget (lists, grids, menus)
• Fully customizable scroll behavior
• Supports styled, themed scrollbars
• Essential for inventories, settings panels, and chat UIs

👉 Watch the full tutorial: YouTube Link
👉 More UI guides: rambod.net
👉 Subscribe to Rambod Dev for the full Widget Blueprint Series.