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

perick12jung · July 15, 2021, 11:28am

Did I do something?

apenzijncoolenleuk1 · July 15, 2021, 7:43pm

Hi again!

When using a Dropdown menu, the icon within the menu doesn’t seem to adjust it’s size:

This is calling :setLabel() after the icon has been setup in the dropdown. My expected behavior would be that the width of the icon should update like with the uppermost icons when updating their label.

Another small thing I noticed is that the healthbar displays over the icons on the right-hand side:

I think hiding the healthbar would be the best option, just like the Leaderstats. (if that is possible)

ForeverHD · July 16, 2021, 10:58am

Cheers for the report, I’ll aim to have these fixed for the next update:

LitTurtleMan · July 16, 2021, 1:10pm

Currently I’m making an admin panel and I was wondering if there was a way to make it so only a certain rank and above will be able to see the icon or menu.

local player = game:GetService("Players").LocalPlayer
local playerGui = player.PlayerGui
local replicatedStorage = game:GetService("ReplicatedStorage")
local iconModule = replicatedStorage.Icon
local Icon = require(iconModule)
local IconController = require(iconModule.IconController)
local Themes = require(iconModule.Themes)
local adminMenu = game.StarterGui["Admin Gui"]

Icon.new()
:setName("AdminPanel")
:setImage(7072721855)
:setLabel("Admin Panel")
:bindEvent("selected", function()
	adminMenu.Visible = true
end)
:bindEvent("deselected", function()
	adminMenu.Visible = false
end)
:setName("AdminIcon")
:give(function(icon)
	return adminMenu.CloseButton.MouseButton1Click:Connect(function()
		icon:deselect()
	end)
end)

ForeverHD · July 16, 2021, 1:32pm

icon:setEnabled(bool) will help achieve this:

local canViewIcon = false
if isAnAdmin then
    canViewIcon = true
end

Icon.new()
    :setEnabled(canViewIcon)

LitTurtleMan · July 16, 2021, 2:11pm

I’ve tried this but it still doesn’t seem to work in game, have I done something wrong. No error shows up in the output?

game.Players.PlayerAdded:Connect(function(Player)

local player = game:GetService("Players").LocalPlayer
local playerGui = player.PlayerGui
local replicatedStorage = game:GetService("ReplicatedStorage")
local iconModule = replicatedStorage.Icon
local Icon = require(iconModule)
local IconController = require(iconModule.IconController)
local Themes = require(iconModule.Themes)
local adminMenu = game.StarterGui["Admin Gui"]
local canViewIcon = false
if Player:GetRankInGroup(10565031) >= 1  then
	canViewIcon = true
end


Icon.new()
:setEnabled(false)
:setName("AdminPanel")
:setImage(7072721855)
:setLabel("Admin Panel")
:bindEvent("selected", function()
	adminMenu.Visible = true
end)
:bindEvent("deselected", function()
	adminMenu.Visible = false
end)
:setName("AdminIcon")
:give(function(icon)
	return adminMenu.CloseButton.MouseButton1Click:Connect(function()
		icon:deselect()	
		end)
	end)
end)

ForeverHD · July 16, 2021, 2:16pm

That should be canViewIcon not false.

LitTurtleMan · July 16, 2021, 2:19pm

This still didn’t seem to change anything, and nothing is showing in the output either…?

game.Players.PlayerAdded:Connect(function(player)

local player = game:GetService("Players").LocalPlayer
local playerGui = player.PlayerGui
local replicatedStorage = game:GetService("ReplicatedStorage")
local iconModule = replicatedStorage.Icon
local Icon = require(iconModule)
local IconController = require(iconModule.IconController)
local Themes = require(iconModule.Themes)
local adminMenu = game.StarterGui["Admin Gui"]
local canViewIcon = false
if player:GetRankInGroup(10565031) > 6 then
	canViewIcon = true
end


Icon.new()
:setEnabled(canViewIcon)
:setName("AdminPanel")
:setImage(7072721855)
:setLabel("Admin Panel")
:bindEvent("selected", function()
	adminMenu.Visible = true
end)
:bindEvent("deselected", function()
	adminMenu.Visible = false
end)
:setName("AdminIcon")
:give(function(icon)
	return adminMenu.CloseButton.MouseButton1Click:Connect(function()
		icon:deselect()	
		end)
	end)
end)

Haydz6 · July 16, 2021, 2:24pm

This is because you have put your code in a PlayerAdded function but since this is a localscript, the player has already joined the game. Removing game.Players.PlayerAdded:Connect(function(player) and the accompanying end) will fix it.

LitTurtleMan · July 16, 2021, 2:26pm

Now it works, thanks for the help. Didn’t realize that could happen so thank you.

LitTurtleMan · July 16, 2021, 3:26pm

I’m currently having a tiny issue where the frame won’t appear even though its visible?

local player = game:GetService("Players").LocalPlayer
local playerGui = player.PlayerGui
local replicatedStorage = game:GetService("ReplicatedStorage")
local iconModule = replicatedStorage.Icon
local Icon = require(iconModule)
local IconController = require(iconModule.IconController)
local Themes = require(iconModule.Themes)
local adminMenu = game.StarterGui.AdminGui
local adminFrame = game.StarterGui.AdminGui.Frame
local playerUI = player:FindFirstChild("PlayerGui")
local canViewIcon = false
if player:GetRankInGroup(10565031) > 6 then
	canViewIcon = true
end


Icon.new()
:setEnabled(canViewIcon)
:setName("AdminPanel")
:setImage(7072721855)
:setLabel("Admin Panel")
:bindEvent("selected", function()
	playerUI.AdminGui.Frame.Visible = true
	adminFrame.AnchorPoint = Vector2.new(0, 0)
	adminFrame.Position = UDim2.new(1.1, 0, 0.178, 0)
	wait(0.5)
	adminFrame:TweenPosition(UDim2.new(0.83, 0, 0.178, 0))
end)
:bindEvent("deselected", function()
	adminFrame.AnchorPoint = Vector2.new(0, 0)
	adminFrame.Position = UDim2.new(0.83, 0, 0.178, 0)
	wait(0.5)
	adminFrame:TweenPosition(UDim2.new(1.1, 0, 0.178, 0))
end)

Haydz6 · July 16, 2021, 11:51pm

Are you sure the ScreenGUI is enabled?

Babo0402 · July 17, 2021, 12:52pm

Is there a option to change the font of a label?

ForeverHD · July 17, 2021, 1:24pm

You can achieve this by customising iconFont within your theme (learn more about themes here):

Or alternatively by modifying the setting of an individual icon:

icon:set("iconFont", Enum.Font.GothamSemibold)

chedsapp · July 18, 2021, 7:44am

Could exploiters potentially use :BindEvent as a backdoor to the serverside? Can exploiters use the module themselves? Is there any protection from them?

ForeverHD · July 18, 2021, 9:36am

icon:bindEvent simply connects a function to a given signal. Everything is client-sided so there’s nothing (such as remotes) to be exploited.

Pearielqs · July 18, 2021, 10:56am

Anyone know why this isn’t auto scaling the TextLabel to the new string?

local Queue = Icon.new()
:setImage(4400704299, "deselected")
:setImage(3944680095, "selected")
:setLabel("Join Queue", "deselected")
:setLabel("Waiting for available server..", "selected")
:setSize(45)
:setTopPadding(8)
:setMid()

Curious but if anyone knows how to autoscale it, let me know! Thanks in advance : )

ForeverHD · July 18, 2021, 11:36am

Calling setSize before setLabel should do the trick:

local Queue = Icon.new()
	:setImage(4400704299, "deselected")
	:setImage(3944680095, "selected")
	:setSize(45)
	:setLabel("Join Queue", "deselected")
	:setLabel("Waiting for available server..", "selected")
	:setTopPadding(8)
	:setMid()

(this is because calling setSize after setLabel causes the icon to shrink back to an X width of 45)

Dev0mar · July 18, 2021, 9:44pm

Hey, so say I have this hierarchy:

Button called Potato that can be toggled on/off
Button with drop down called carrot
- Random bobux button
- Button called tix that opens up a horizontal menu
  - Button called noob that can be toggled

Now when I go toggle “potato” on, then go toggle “noob” on THEN off, all three buttons, “Potato”, “Noob” and “carrot” are now deselected

Any way I can make it so that doesn’t happen? I’d like to only deselect noob without causing the others to be deselected.

ForeverHD · July 19, 2021, 4:09am

Hey, this should be as simple as setting deselectWhenOtherIconSelected to false for all your desired icons (dropdowns and menus automatically apply this to their icon). More info here: