How would I make a dropdownmenu (like rivals)?

Help and Feedback Scripting Support
, , ,
1

Sup! I’m trying to create a downdown menu for my game that looks somewhat like this:
image

I’m not sure how I can create it tho. If you have any ideas or other posts, please lmk :smiley:

2

here’s the code and hierarchy for mine, it might help

local dropArrow = script.Parent:WaitForChild("Button")
local dropFrame = script.Parent:WaitForChild("DropdownFrame")
local adjustLabel = script.Parent:WaitForChild("CurrentOption")
local TS = game:GetService("TweenService")

dropFrame.Visible = false
local down = false

local function showOptions(tog)
	for i, v in pairs(dropFrame.Dropdowns:GetChildren()) do
		if v:IsA("TextButton") then
			v.Visible = tog
		end
	end
end

local dropDownTween = TS:Create(dropFrame, TweenInfo.new(0.2),
	{ Size = UDim2.new(1, 0, 0, 0),
		Position = UDim2.new(0, 0, 0.4, 0) }
)

local dropUpTween = TS:Create(dropFrame, TweenInfo.new(0.2),
	{ Size = UDim2.new(1, 0, 4.208, 0),
		Position = UDim2.new(0, 0, 0.4, 0) }
)

dropArrow.MouseButton1Down:Connect(function()
	down = not down -- ✅ Toggle state properly

	if down then
		-- ✅ Open dropdown
		showOptions(true)
		dropFrame.Visible = true
		dropUpTween:Play()
	else
		-- ✅ Close dropdown
		dropDownTween:Play()
		showOptions(false)
		dropDownTween.Completed:Connect(function()
			dropFrame.Visible = false -- ✅ Hide only after animation finishes
		end)
	end
end)

for i, child in pairs(dropFrame.Dropdowns:GetChildren()) do
	if child:IsA("TextButton") then
		child.MouseButton1Down:Connect(function()
			-- ✅ Close dropdown
			dropDownTween:Play()
			showOptions(false)
			dropDownTween.Completed:Connect(function()
				dropFrame.Visible = false -- ✅ Hide only after animation finishes
			end)
			
			adjustLabel.Text = child.Text
			down = false
		end)
	end
end

image
(inside Dropdowns there is textbuttons and UiListLayout, sorry i forgot to open that for the image)

3 Likes