📋 Menus and Navigation

Menu Fundamentals

Menus differ from HUD elements in important ways. While a HUD overlays gameplay and shouldn't interfere with controls, menus take over—they capture input, show a cursor, and often pause the game. Understanding these differences is key to building menus that feel right.

Input Modes

Unreal Engine has three input modes that determine where player input goes:

Game Only: Input goes to the game (character movement, shooting, camera). The mouse cursor is hidden. Use this during normal gameplay.

UI Only: Input goes only to UI widgets (buttons, sliders). The mouse cursor is visible. Game input is blocked. Use this for full-screen menus like main menu or inventory.

Game and UI: Input can go to both game and UI. The cursor can be shown or hidden. Use this for in-game UI that needs clicks while allowing movement (like an RTS game).

Figure: Three input modes control where player input is directed.

Setting Input Mode

Input mode is set on the Player Controller:

// Opening a menu
Set Input Mode UI Only
  Target: Player Controller (Self)
  In Widget to Focus: Your Menu Widget (optional)
Set Show Mouse Cursor: True

// Closing a menu
Set Input Mode Game Only
  Target: Player Controller (Self)
Set Show Mouse Cursor: False

The "In Widget to Focus" parameter is important for keyboard/gamepad navigation—it tells UMG which widget should receive initial focus.

Widget Focus

Focus determines which widget receives keyboard/gamepad input. When a button has focus, pressing Enter/A activates it. Arrow keys/D-pad move focus between widgets.

Setting Initial Focus:

• Use the "In Widget to Focus" parameter when setting input mode
• Or call Set Keyboard Focus on a specific widget
• Or set Is Focusable on widgets and let UMG auto-focus

Focus Navigation:

• UMG automatically handles navigation between focusable widgets
• Navigation follows visual layout (up/down/left/right)
• You can override navigation with explicit settings per widget

Is Focusable Property

Not all widgets should receive focus. A background image doesn't need it, but buttons do.

Focusable by Default: Button, Check Box, Slider, Editable Text

Not Focusable by Default: Text Block, Image, Progress Bar, Panels

You can change focusability in the widget's Details panel under Interaction → Is Focusable.

Navigation Override

Sometimes automatic navigation doesn't work well—maybe widgets are positioned unusually or you want to wrap from the last button to the first. Override navigation per widget:

1. Select a widget
2. In Details, find Navigation section
3. Set Left/Right/Up/Down to:
   • Escape: Navigation leaves focus (default for reaching edges)
   • Stop: Can't navigate in this direction
   • Wrap: Wraps to opposite side
   • Explicit: Specify exact widget to navigate to
   • Custom: Call a function to determine target

Figure: Focus navigation allows keyboard/gamepad menu control.

Game Pause

Pause menus typically freeze the game. Use Set Game Paused:

// Pausing
Set Game Paused: True

// Unpausing  
Set Game Paused: False

What Pauses: Actor ticking, physics, animations, timers (unless set to ignore pause)

What Doesn't Pause: UI, audio (by default), anything marked to ignore pause

Menu Architecture

Well-organized menus use a hierarchical structure:

Main Menu
├── Play Button → Start Game
├── Options Button → Options Menu
│   ├── Graphics Tab
│   ├── Audio Tab
│   ├── Controls Tab
│   └── Back Button → Main Menu
└── Quit Button → Exit Game

Pause Menu
├── Resume Button → Close Menu
├── Options Button → Options Menu
├── Main Menu Button → Return to Main Menu
└── Quit Button → Exit Game

Consider using a Widget Switcher for menus with multiple screens, or spawn/destroy menu widgets as needed.

flowchart TD
    A["Main Menu"] -->|Play| B["Gameplay"]
    A -->|Options| C["Options Menu"]
    A -->|Quit| D["Exit Game"]
    
    C -->|Back| A
    
    B -->|Pause| E["Pause Menu"]
    E -->|Resume| B
    E -->|Options| C
    E -->|Main Menu| A
    E -->|Quit| D
    
    style A fill:#667eea,color:#fff
    style B fill:#4CAF50,color:#fff
    style C fill:#FF9800,color:#fff
    style E fill:#9C27B0,color:#fff
    style D fill:#f44336,color:#fff
                

Figure: Typical menu flow between screens.

Creating a Main Menu

The main menu is often the first thing players see. It needs to be visually appealing, easy to navigate, and functional. Let's build a proper main menu from scratch.

Main Menu Structure

A typical main menu includes:

• Game title/logo
• Menu buttons (Play, Options, Credits, Quit)
• Background (image, video, or 3D scene)
• Optional: Version number, copyright text

Creating the Widget

1. Create Widget Blueprint: WBP_MainMenu
2. Add Canvas Panel as root

Background

1. Add Image to Canvas Panel
2. Set anchors to Stretch (fills entire screen)
3. Set all offsets to 0
4. Set Image to your background texture (or solid color)
5. Rename to BackgroundImage

Title

1. Add Text Block to Canvas Panel
2. Set anchors to Top-Center
3. Set Text to your game title
4. Set Font Size large (48-72)
5. Position appropriately (Y: 100-150)
6. Rename to TitleText

Button Container

1. Add Vertical Box to Canvas Panel
2. Set anchors to Center
3. Set Alignment to 0.5, 0.5 (centers the box)
4. Rename to ButtonContainer

Menu Buttons

Add buttons to the Vertical Box (or use your reusable button from Lesson 7.2):

1. Add Button with child Text Block "Play"
2. Add Button with child Text Block "Options"
3. Add Button with child Text Block "Quit"
4. For each button, set Padding in the Slot section (e.g., 10 on all sides)
5. Style buttons consistently (size, colors, font)

Figure: Main menu with centered title and button stack.

Button Click Handlers

For each button, create click event handlers:

Play Button

1. Select Play button, in Details find Events → On Clicked
2. Click + to create handler
3. In the handler:
   • Open Level node with your gameplay level name
   • Or use Remove from Parent if menu is in the game level

Options Button

1. Create click handler
2. Options:
   • Switch to options screen (if using Widget Switcher)
   • Create and show Options widget
   • Or set visibility of options panel

Quit Button

1. Create click handler
2. Add Quit Game node
3. Set Specific Player to Player Controller

Displaying the Main Menu

Main menus are typically shown from a dedicated menu level or on game start:

Option 1: Menu Level

1. Create a level for your main menu (MainMenu_Level)
2. In Level Blueprint, on Event BeginPlay:
   • Create Widget (WBP_MainMenu)
   • Add to Viewport
   • Get Player Controller → Set Input Mode UI Only
   • Set Show Mouse Cursor: True
3. Set this level as the default/startup level in Project Settings

Option 2: Game Instance

For more complex games, manage menus through a Game Instance that persists across levels.

Setting Initial Focus

For keyboard/gamepad support, set focus to the first button:

1. In the menu widget's Event Construct:
   • Get reference to Play button
   • Call Set Keyboard Focus on it
2. Or in Level Blueprint when creating the widget:
   • Pass the Play button to "In Widget to Focus" parameter

Figure: Set keyboard focus to enable immediate controller navigation.

Adding Menu Animations

Polished menus have entrance animations. UMG supports widget animations:

1. Open your menu widget
2. At bottom of Designer, find Animations panel
3. Click + Animation, name it "FadeIn"
4. In the animation timeline:
   • Add a track for the Canvas Panel's Render Opacity
   • At frame 0: Set opacity to 0
   • At frame 0.5 (half second): Set opacity to 1
5. In Event Construct, call Play Animation with your FadeIn animation

Common menu animations:

• Fade In: Opacity 0 → 1
• Slide In: Position offset → 0
• Scale In: Scale 0.8 → 1.0
• Staggered Buttons: Each button animates in sequence

Pause Menu System

The pause menu appears during gameplay, freezes the game, and lets players access options or quit. It requires careful handling of input mode and game pause state.

Pause Menu Widget

Create WBP_PauseMenu with structure similar to main menu:

Canvas Panel
├── Image (Semi-transparent background overlay)
└── Vertical Box (Centered)
    ├── Text Block: "PAUSED"
    ├── Button: "Resume"
    ├── Button: "Options"
    ├── Button: "Main Menu"
    └── Button: "Quit"

The background overlay should be semi-transparent (e.g., black with 0.7 alpha) to dim the game view.

Opening the Pause Menu

Handle pause input in your Player Controller:

1. Create an Input Action for Pause (or use the Escape key directly)
2. In Player Controller, on pause input:
   • Check if pause menu is already open
   • If not open: Create and show pause menu
   • If open: Close pause menu

Player Controller Setup

Variables needed:

• PauseMenuWidget (type: WBP_PauseMenu) — Reference to current pause menu
• bIsPaused (Boolean) — Track pause state

Functions:

// Function: OpenPauseMenu
Create Widget (WBP_PauseMenu) → Set PauseMenuWidget
Add to Viewport (PauseMenuWidget)
Set Game Paused: True
Set Input Mode UI Only (Widget to Focus: Resume Button)
Set Show Mouse Cursor: True
Set bIsPaused: True

// Function: ClosePauseMenu
Remove from Parent (PauseMenuWidget)
Set PauseMenuWidget: None
Set Game Paused: False
Set Input Mode Game Only
Set Show Mouse Cursor: False
Set bIsPaused: False

// On Pause Input Pressed
Branch on bIsPaused
  True → ClosePauseMenu
  False → OpenPauseMenu

Figure: Pause menu flow showing state transitions.

Pause Menu Button Handlers

In WBP_PauseMenu, handle button clicks:

Resume Button

On Resume Clicked:
  Get Owning Player → Cast to YourPlayerController
  Call ClosePauseMenu function

Main Menu Button

On MainMenu Clicked:
  Get Owning Player → Cast to YourPlayerController
  Call ClosePauseMenu function
  Open Level: "MainMenu_Level"

Quit Button

On Quit Clicked:
  Quit Game

Handling ESC to Close

Players expect ESC to close the pause menu. Two approaches:

Option 1: Handle in Player Controller (already done if toggle logic is there)

Option 2: Handle in Widget with Input Action:

1. In widget Graph, search for "Escape" or your pause action
2. On that input, call the close/resume logic

Confirmation Dialogs

For destructive actions (Quit, Return to Main Menu), add confirmation:

1. Create WBP_ConfirmDialog widget:
   • Text: "Are you sure?"
   • Button: "Yes" / "Confirm"
   • Button: "No" / "Cancel"
2. Add Event Dispatcher: OnConfirmed
3. Add Event Dispatcher: OnCancelled
4. Yes calls OnConfirmed; No calls OnCancelled
5. Parent binds to dispatchers and handles result

Figure: Confirmation dialog prevents accidental data loss.

Settings/Options Menu

Options menus let players customize their experience. Common settings:

Graphics:

• Resolution (Combo Box)
• Quality Preset (Low/Medium/High/Ultra)
• Fullscreen/Windowed (Check Box)
• VSync (Check Box)

Audio:

• Master Volume (Slider)
• Music Volume (Slider)
• SFX Volume (Slider)

Controls:

• Mouse Sensitivity (Slider)
• Invert Y (Check Box)
• Key Bindings (advanced)

Saving Settings

Use the Game User Settings system for graphics, or create a custom Save Game for other settings:

// Get Game User Settings
Get Game User Settings → Set Fullscreen Mode
                       → Set Screen Resolution
                       → Apply Settings

// For custom settings (audio, controls)
Create Save Game Object → Set values → Save to Slot

Hands-On: Complete Menu System

Let's build a complete menu system with a main menu, pause menu, and a simple options screen. This exercise ties together everything we've learned about menus, input modes, focus, and navigation.

Part 1: Create the Main Menu

Step 1: Create the Widget

1. Create Widget Blueprint: WBP_MainMenu
2. Open it in the Widget Editor

Step 2: Build the Layout

1. The root Canvas Panel should already exist
2. Add Image for background:
   • Anchors: Stretch (all corners)
   • Offsets: All 0
   • Color: Dark blue (#1a237e) or your preference
   • Rename: Background
3. Add Text Block for title:
   • Anchors: Top-Center
   • Position Y: 80
   • Alignment X: 0.5
   • Text: "ADVENTURE GAME" (or your title)
   • Font Size: 48
   • Rename: TitleText
4. Add Vertical Box for buttons:
   • Anchors: Center
   • Alignment: 0.5, 0.5
   • Rename: ButtonContainer

Step 3: Add Menu Buttons

Inside ButtonContainer, add three buttons:

1. Play Button:
   • Add Button to ButtonContainer
   • Add Text child: "Play Game"
   • Button size: 200 × 50
   • Padding (Slot): 0, 5, 0, 5 (top/bottom margin)
   • Style Normal Tint: #667eea
   • Style Hovered Tint: #8b9cf9
   • Style Pressed Tint: #5560d4
   • Rename button: PlayButton
   • Check Is Variable
2. Options Button:
   • Same styling as Play
   • Text: "Options"
   • Rename: OptionsButton
3. Quit Button:
   • Same styling as Play
   • Text: "Quit"
   • Rename: QuitButton

Figure: Main menu widget hierarchy and preview.

Step 4: Add Button Click Events

Switch to Graph view:

1. Play Button Handler:
   • Select PlayButton in Hierarchy
   • In Details → Events → On Clicked, click +
   • In the event handler, add:
     • Open Level node
     • Level Name: "GameLevel" (your gameplay level)
2. Quit Button Handler:
   • Create On Clicked event for QuitButton
   • Add Quit Game node
3. Options Button: (We'll complete this after creating options menu)

Step 5: Set Initial Focus

1. In Graph, add Event Construct
2. Drag PlayButton from Variables
3. Add Set Keyboard Focus node
4. Connect PlayButton to Target

Part 2: Create the Main Menu Level

1. Create a new Level: File → New Level → Empty Level
2. Save as MainMenu_Level
3. Open Level Blueprint (Blueprints → Open Level Blueprint)
4. Add the following on Event BeginPlay:
   • Create Widget (Class: WBP_MainMenu)
   • Add to Viewport
   • Get Player Controller (index 0)
   • Set Input Mode UI Only
   • Set Show Mouse Cursor: True

Figure: Level Blueprint setup for main menu.

Part 3: Create the Pause Menu

Step 1: Create the Widget

1. Create Widget Blueprint: WBP_PauseMenu

Step 2: Build the Layout

1. Add Image for overlay:
   • Anchors: Stretch
   • Color: Black with 0.7 alpha (semi-transparent)
   • Rename: Overlay
2. Add Vertical Box for content:
   • Anchors: Center
   • Alignment: 0.5, 0.5
   • Rename: MenuContainer
3. Inside MenuContainer, add:
   • Text Block: "PAUSED" (Font Size: 36)
   • Spacer: Height 30
   • Button: "Resume" → ResumeButton (Is Variable ✓)
   • Button: "Options" → PauseOptionsButton
   • Button: "Main Menu" → MainMenuButton
   • Button: "Quit" → PauseQuitButton
4. Style all buttons consistently (same as main menu)

Step 3: Create Event Dispatcher

The pause menu needs to tell the Player Controller when to close:

1. In Graph, go to My Blueprint panel
2. Under Event Dispatchers, click +
3. Name it OnResumeClicked

Step 4: Add Button Events

1. Resume Button:
   • On Clicked → Call OnResumeClicked (dispatcher)
2. Main Menu Button:
   • On Clicked → Open Level: "MainMenu_Level"
3. Quit Button:
   • On Clicked → Quit Game

Step 5: Set Initial Focus

1. On Event Construct → Set Keyboard Focus to ResumeButton

Part 4: Set Up Player Controller

1. Create (or open) your Player Controller Blueprint: BP_PlayerController

Step 1: Add Variables

1. PauseMenuRef (Type: WBP_PauseMenu, Object Reference)
2. bIsGamePaused (Type: Boolean, Default: False)

Step 2: Create OpenPauseMenu Function

1. Create new function: OpenPauseMenu
2. Add nodes:
   • Create Widget (Class: WBP_PauseMenu, Owning Player: Self)
   • Set PauseMenuRef to return value
   • Add to Viewport (Target: PauseMenuRef)
   • Set Game Paused: True
   • Set Input Mode UI Only (In Widget to Focus: PauseMenuRef)
   • Set Show Mouse Cursor: True
   • Set bIsGamePaused: True
   • Drag PauseMenuRef → Bind Event to OnResumeClicked
   • Create custom event: HandleResume

Step 3: Create ClosePauseMenu Function

1. Create new function: ClosePauseMenu
2. Add nodes:
   • Is Valid check on PauseMenuRef
   • If valid: Remove from Parent (Target: PauseMenuRef)
   • Set PauseMenuRef: None (clear reference)
   • Set Game Paused: False
   • Set Input Mode Game Only
   • Set Show Mouse Cursor: False
   • Set bIsGamePaused: False

Step 4: Handle HandleResume Event

1. From the HandleResume custom event created earlier
2. Call ClosePauseMenu

Step 5: Handle Pause Input

1. In Event Graph, add input for Escape key (or create Input Action)
2. On Escape Pressed:
   • Branch on bIsGamePaused
   • True → Call ClosePauseMenu
   • False → Call OpenPauseMenu

Figure: Player Controller handles pause menu toggle.

Part 5: Create Simple Options Menu

Step 1: Create the Widget

1. Create Widget Blueprint: WBP_OptionsMenu

Step 2: Build the Layout

1. Add Image for background (same as main menu or semi-transparent)
2. Add Vertical Box (centered) for content
3. Inside Vertical Box:
   • Text Block: "OPTIONS" (title)
   • Spacer: Height 20
   • Horizontal Box: Volume control
     • Text Block: "Master Volume"
     • Slider: VolumeSlider (Is Variable ✓)
     • Text Block: VolumePercent (Is Variable ✓) "100%"
   • Spacer: Height 20
   • Button: "Back" → BackButton

Step 3: Add Event Dispatcher

1. Create Event Dispatcher: OnBackClicked

Step 4: Add Slider Logic

1. Select VolumeSlider
2. In Details → Events → On Value Changed, click +
3. In the event handler:
   • Get the Value parameter
   • Multiply by 100, round to integer
   • Format as text with "%"
   • Set VolumePercent text
   • (Optional) Apply to audio: Get Sound Mix → Set Sound Mix Class Override

Step 5: Back Button

1. On BackButton Clicked → Call OnBackClicked dispatcher

Part 6: Connect Options to Menus

Now connect the Options button in both menus:

Main Menu Options Button:

1. In WBP_MainMenu Graph
2. Create variable: OptionsMenuRef (Type: WBP_OptionsMenu)
3. On OptionsButton Clicked:
   • Create Widget (WBP_OptionsMenu)
   • Set OptionsMenuRef
   • Add to Viewport
   • Set Self Visibility: Collapsed (hide main menu)
   • Bind to OnBackClicked → Create custom event "HandleOptionsBack"
4. On HandleOptionsBack:
   • Remove OptionsMenuRef from Parent
   • Set Self Visibility: Visible
   • Set Keyboard Focus to PlayButton

Part 7: Set Game Mode

1. Open Project Settings → Maps & Modes
2. Set Default GameMode to one that uses your BP_PlayerController
3. Or create a Game Mode Blueprint that specifies BP_PlayerController
4. Set Editor Startup Map to MainMenu_Level
5. Set Game Default Map to MainMenu_Level

Part 8: Test Everything

1. Test Main Menu:
   • Play the MainMenu_Level
   • Verify mouse cursor is visible
   • Click buttons to test hover states
   • Use arrow keys to navigate between buttons
   • Press Enter to activate focused button
   • Test Options opens and Back returns
   • Test Quit exits (in standalone, not editor)
2. Test Gameplay:
   • Click Play to start game level
   • Verify mouse cursor is hidden
   • Verify character can move (if applicable)
3. Test Pause Menu:
   • Press Escape during gameplay
   • Verify game pauses (movement stops)
   • Verify mouse cursor appears
   • Test Resume closes menu and unpauses
   • Test Main Menu returns to main menu level
   • Test Escape key closes pause menu

Troubleshooting

Bonus Challenges

1. Add Menu Animations: Fade in the main menu on level load, slide buttons in
2. Add Sound Effects: Play sounds on button hover and click
3. Add Confirmation Dialog: Confirm before quitting or returning to main menu
4. Add More Settings: Graphics quality, fullscreen toggle, mouse sensitivity
5. Save Settings: Use Save Game to persist options between sessions
6. Add Loading Screen: Show a loading widget when transitioning between levels

Summary

In this lesson, you've learned how to create professional menu systems that handle input properly, support multiple input devices, and integrate smoothly with gameplay. Menus are where players spend significant time, so getting them right is essential for a polished game experience.

Key Concepts

Input Modes: Three modes control where input goes—Game Only for gameplay, UI Only for menus, and Game and UI for hybrid situations. Always set the appropriate mode when showing or hiding menus.

Widget Focus: Focus determines which widget receives keyboard/gamepad input. Set initial focus when opening menus to enable immediate navigation. Buttons are focusable by default; other widgets can be made focusable as needed.

Navigation: UMG automatically handles directional navigation between focusable widgets. Override navigation explicitly when automatic behavior doesn't work well for your layout.

Game Pause: Use Set Game Paused to freeze gameplay during pause menus. Remember that UI widgets continue to function while the game is paused.

Main Menu: Typically in a dedicated level, displays on BeginPlay, sets Input Mode UI Only. Contains buttons for Play, Options, and Quit with appropriate handlers.

Pause Menu: Created and shown during gameplay, toggled with ESC/Start. Requires pausing the game, changing input mode, and showing cursor. Resume button restores gameplay state.

Event Dispatchers: Enable child menus (like Options) to communicate back to parent menus. The child calls the dispatcher; the parent binds and handles the response.

Menu Transitions: Use visibility changes, Widget Switcher, or create/destroy widgets to move between menu screens. Maintain focus and input state during transitions.

Input Mode Quick Reference

Menu System Checklist

Best Practices

• Always set initial focus: Enable immediate keyboard/gamepad navigation without requiring a click first
• Match input mode to context: UI Only for menus, Game Only for gameplay—don't leave in wrong state
• Handle both mouse and controller: Test navigation with keyboard, then gamepad—both should work smoothly
• Use Event Dispatchers for sub-menus: Keep menu logic encapsulated; communicate through dispatchers
• Add confirmation for destructive actions: Quit and Return to Main Menu should confirm to prevent accidents
• Keep animations short: 0.2-0.5 seconds max—players see menus repeatedly
• Test pause functionality: Verify game actually freezes—physics, AI, timers should all stop
• Clear references when closing: Set widget references to None after Remove from Parent to prevent stale references
• Consider audio: Add button hover/click sounds; pause music or lower volume during pause menu

Figure: Complete menu system showing relationships between levels, menus, and the Player Controller.

What's Next?

With your menu system complete, the next lesson covers Data Binding and Events in more depth. You'll learn advanced techniques for connecting UI to game systems, including property binding optimizations, event-based UI updates, and creating truly dynamic interfaces that respond to complex game state changes.

Knowledge Check