Build a Responsive Menu

Build a centered panel with an open button and a close button. The panel uses the available screen space but stops growing on larger displays.

Before you start

You need Roblox Studio and basic familiarity with Explorer and Properties. This lesson uses standard Studio objects and does not require a plugin.

1. Create the hierarchy

Inside StarterGui, create these objects with the exact names shown:

StarterGui
  MenuGui (ScreenGui)
    OpenButton (TextButton)
    Panel (Frame)
      Title (TextLabel)
      CloseButton (TextButton)
      SizeLimit (UISizeConstraint)
    MenuController (LocalScript)

Set OpenButton.Text to Open menu, CloseButton.Text to Close, and Title.Text to My menu.

2. Configure the layout

Enter these values in Properties. UDim2 values are written as {X scale, X offset}, {Y scale, Y offset}.

Object	Property	Value
MenuGui	ScreenInsets	CoreUISafeInsets
MenuGui	ResetOnSpawn	false
OpenButton	Position	`{0, 16}, {0, 16}`
OpenButton	Size	`{0, 140}, {0, 44}`
Panel	AnchorPoint	`0.5, 0.5`
Panel	Position	`{0.5, 0}, {0.5, 0}`
Panel	Size	`{0.9, 0}, {0.7, 0}`
Panel	Visible	false
SizeLimit	MaxSize	`640, 480`
Title	Position	`{0, 16}, {0, 12}`
Title	Size	`{1, -120}, {0, 44}`
Title	TextSize	22
Title	TextWrapped	true
CloseButton	AnchorPoint	`1, 0`
CloseButton	Position	`{1, -12}, {0, 12}`
CloseButton	Size	`{0, 80}, {0, 44}`

Leave SizeLimit.MinSize at zero. A large minimum can force the panel beyond a small phone's available area. Scale gives the panel proportional space; offsets reserve consistent margins and button sizes. AnchorPoint makes Position refer to the panel's center.

3. Connect the buttons

Paste this into MenuController:

local gui = script.Parent
local openButton = gui:WaitForChild("OpenButton")
local panel = gui:WaitForChild("Panel")
local closeButton = panel:WaitForChild("CloseButton")

local function setOpen(isOpen)
    panel.Visible = isOpen
    openButton.Visible = not isOpen
end

openButton.Activated:Connect(function()
    setOpen(true)
end)

closeButton.Activated:Connect(function()
    setOpen(false)
end)

setOpen(false)

Activated supports mouse, touch, and gamepad activation. Gamepad users still need a way to select the button, so test selection navigation separately.

4. Check the result

Start a Play test. Open and close the menu, then repeat using Studio's device emulator in portrait and landscape. Check a narrow phone and a large desktop view. Confirm that the close button stays reachable and the title does not cover it.

Try a longer title to expose text clipping. A size constraint does not automatically rearrange content, so complex menus may need different arrangements at smaller widths.

Troubleshooting

Nothing happens: confirm MenuController is a LocalScript and test with Play.
The menu stays hidden: inspect MenuGui in the player's PlayerGui, not just the StarterGui template.
The panel is off-center: verify both AnchorPoint values are 0.5.

UNOFFICIAL ROBLOX TUTOR