How to make nested dropdown ui?

[SalvatoreScripts (Salvatore)]

What would be the simplest way to create nested dropdown ui which looks like the studio explorer?
Is there a way to recreate this using ui constraints or no? If not, how would I script this into a scrolling frame?

[Yarik_superpro (The_GrandOptimizer)]

That looks a lot like a recursive call
I have implemented something like that before in Hierarchy Saver althrough with terrible code due to my insane lack of knowledge at the time, but basically:
You have one big “collider” frame and UIListLayout
This collider frame should be the area as to where the visual of this section ends
And upon recursive generation, each layer has to be offset by, let’s say, 15 pixels.
There is also a way to implement it purely free of UI constraints too, and that may be better since there is no need for a collider frame.

[2112Jay]

Wouldn’t this just be setting different indexes with clicks, or a menu. Still be the same, just change the index for the whatever menu and maybe the items in it depending on how you have this set up.
I guess this isn’t a GUI.

[SalvatoreScripts (Salvatore)]

I don’t know how to explain it other than how its explained online. I haven’t seen many people make these easily with roblox ui constraints.

[2112Jay]

I see, and I’ll say what I always say when creating something new.. fake it until it isn’t fake.

[INBOUNDNUKE]

I was able to vibecode something like this. It’s very minimal and uses one tiny script so dropdowns are interactive. I think it’s able to work minimally because of AutomaticSize.

local selected

for _, button in script.Parent:GetDescendants() do
	if button:IsA("TextButton") and button.Name == "ExpandCollapse" then
		local row = button.Parent
		local children = row.Parent:WaitForChild("Children")

		button.Activated:Connect(function()
			children.Visible = not children.Visible
			button.Text = children.Visible and "-" or "+"

			for _, line in row:GetChildren() do
				if line.Name == "Connector" and line.Size.X.Offset == 1 then
					line.Visible = children.Visible
				end
			end
		end)

	elseif button:IsA("TextButton") and button.Name == "Row" then
		button.Activated:Connect(function()
			if selected then
				selected.BackgroundTransparency = 1
			end

			selected = button
			button.BackgroundTransparency = 0
		end)
	end
end

treeview.rbxm (17.4 KB)

[SalvatoreScripts (Salvatore)]

Never knew automatic size would be the solution to this- thank you! I’m ususally a critic of AI not being able to meet my needs but this is phenomenal. Did the AI build the UI too or no? Which model did you use to make this?

[INBOUNDNUKE]

Glad I (or the ai) could help. I used 5.6 sol high for this and it made the entire ui. Originally it was all in code but i just copied the gui from playergui and removed the code that created the gui.

[SalvatoreScripts (Salvatore)]

How would I make keyframes like this that align position and size with the dropdowns?
Like the animation editor ui.

I can put a frame in the dropdown but I don’t know how to make it take up the rest of the space, so that i can resize the scrolling frame and it takes up the space the scrolling frame didn’t use.