[v3!] TopbarPlus v3.0.0 | Construct intuitive topbar icons; customise them with themes, dropdowns, captions, labels and much more

Hello, I come to seek help or a tutorial type, how can I do the opening and closing video?

If you’re looking to create a sliding UI toggle like that in the video, you can achieve it with TweenService and listening to icon events such as icon.selected and icon.deselected.

It’s well worth checking out the docs for more info and examples:

Add this to the code for fix:

local humanoid = game.Players.LocalPlayer.Character.Humanoid
humanoid.HealthChanged:Connect(function(health)
	if health == 0 then
	    	nanobloxIcon:deselect()
	    	nanobloxIcon:lock()
	end
end)

Humanoid is not a valid member of Model “Workspace.KINGfarihin”

Do :WaitForChild() instead of ‘.’

hi so like i have a tweensize for the gui how can i put it in the topbar script?


function openGui()
	open = true
	script.Parent.Parent.Frame:TweenSize(UDim2.new(0, 400,0, 337), "Out", "Quint", 1, true)
end

function closeGui()
	open = false
	script.Parent.Parent.Frame:TweenSize(UDim2.new(0,0,0,0), "Out", "Quint", 1, false)
end

script.Parent.MouseButton1Down:Connect(function()
	if open then
		closeGui()
	else
		openGui()
	end
end)
2 Likes

Do it like this:

yourIcon:bindEvent("selected", function()
    openGui()
end)

yourIcon:bindEvent("deselected", function()
    closeGui()
end)
1 Like

There is a blue line under openGui and closeGui

I have my own GUI placed in the middle of the topbar, which has the potential to overlap with TopbarPlus icons (especially on smaller screens). Is there any way to integrate it into TopbarPlus?

How to change the top bar icon position?

Ben said that he won’t add a feature like that, he wants to keep the concept of this module.

1 Like

Can you share an image of this?

Pretty much what taehyung said, although you can use the following to modify icon offsets:

Hi,

When I call :Destroy() on a dropdown list, the icons within the dropdown list separate into their own icons.

Example:
Normal behavior with the dropdown button before being destroyed

After dropdown button gets destroyed:

Basically, I want the icons under the dropdown button to be destroyed as well when the dropdown button is destroyed.

The fake health bar wont reset when I set it to the right and used ClearIconOnSpawn (Replied to the wrong person :sweat_smile:)

Hey, I’ve experienced a bigish bug involving Adonis Admin as well as reseting.

If I run the :Re or :Refresh it respawns me as normal, but when you press the buttons the UI its attached too doesn’t reload. I’ll link a video below. Same happens when resetting via the esc menu.

Another thing is, the error says that Uniforms doesn’t exist, but it does and can be made visible using another script, hence why I think its a bug related to this.

Error in console:

My script:
image
image
image

Please help because its really annoying :sweat_smile:

So im having an issue where no gui pops up for my button!
heres screenshots https://media.discordapp.net/attachments/871820376265613332/886673471495618671/unknown.png when the button is clicked https://media.discordapp.net/attachments/871820376265613332/886673557256552578/unknown.png?width=1165&height=585

The solution of that is by setting the ResetOnSpawn on your ScreenGui to false
For more details, look it up here:
ResetOnSpawn - developer.roblox.com

1 Like

This is the solution you’re looking for.
ResetOnSpawn - developer.roblox.com

1 Like

Hey! I am having some issues here, so I am trying to make a quick report system where they select the user then they can pick the reason but everytime I close it moves the options next to the icon?

example: https://gyazo.com/70463969cacf075324479adedd1ec04f

Here is most of my code, if you want the rest let me know ty in advance.

function createDropdownOption(mainIcon, playerList)
	for i, v in pairs(playerList) do
		mainIcon:setDropdown({
			Icon.new()
			:setLabel(tostring(v))
		})
	end
end
-- Actual code --

reportIcon = Icon.new()
reportIcon:setImage(6326373239)
reportIcon:setTip("Report an user")
reportIcon:setCornerRadius(0, 8)

reportIcon:set("dropdownSquareCorners", true)

reportIcon.toggled:Connect(function(isSelected)
	if isSelected == true then
		local playerList = updatePlayerList()
		print(#playerList)
		createDropdownOption(reportIcon, playerList)
		--updateDropdownOption(playerList, reportIcon)
	else
		reportIcon:setDropdown()
		print("Drop down 'deleted'")
	end
end)

@ForeverHD