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

Nice work! I love the fork.

On a side note, I personally think that the new topbar isn’t necessary. I don’t understand why Roblox decided to remake it. As they say: if it aint broken, don’t fix it.

2 Likes

I hate that sentence.

Designs change every few years. its not like you’re going to keep your design from 2006 just because it isn’t broken.

2 Likes

I’m not saying designs should never change. I’m saying that changing the topbar design right now isn’t necessary. The old design was not released in 2006. It was released in 2020. All they did was change the position of the buttons to a place that’s less ideal to access.

6 Likes

yep i fixed it ,let me know if you find other bugs

1 Like

this is unreliable for new work.

TopbarPlus isn’t being updated by ForeverHD anymore. I recommend using UIShelf instead

5 Likes

I have a fork which I will be supporting for the time being.
It supports hybrid (Old & New Roblox Topbar!)

6 Likes

Hello, Im having a issue where on the dropdown, if person selects another icon from another dropdown it just deselects the one from the 1st dropdown aswell how do i fix this??

local icon3 = Icon.new()
:setImage(8285106104) 
:setTheme(Themes.BlueGradient) 
:setCaption("Set SpawnPoint")
icon3:setDropdown({
Icon.new()
	:setLabel("Regular")
	:setProperty("deselectWhenOtherIconSelected", true)
	:setTheme(Themes.BlueGradient)
	:bindEvent("selected", function(self)
		prspawn = false 
		celspawn = false 
		regspawn = true 
		print("set spawn to reg")
		game.Players.LocalPlayer.Character.Humanoid.Health = 0 
	end)
	:bindEvent("deselected", function() -- tween out
		regspawn = false 
	end),

Icon.new()
	:setLabel("Prison")
	:setProperty("deselectWhenOtherIconSelected", true)
	:setTheme(Themes.BlueGradient)
	:bindEvent("selected", function(self)
		regspawn = false 
		celspawn = false 
		prspawn = true 
		print("set spawn to prison")
		game.Players.LocalPlayer.Character.Humanoid.Health = 0 
	end)
	:bindEvent("deselected", function() -- tween out
		prspawn = false 
	end),

Icon.new()
	:setLabel("Prison Cells")
	:setProperty("deselectWhenOtherIconSelected", true)
	:setTheme(Themes.BlueGradient)
	:bindEvent("selected", function(self)
		regspawn = false 
		prspawn = false 
		celspawn = true
		print("set spawn to Cells")
		game.Players.LocalPlayer.Character.Humanoid.Health = 0 
	end)
	:bindEvent("deselected", function() -- tween out
		celspawn = false
end),
})

-- [Vars] -- 
local RS = game:GetService("ReplicatedStorage")
local lighting = game:GetService("Lighting")

-- [Skies] -- 

local Skies = RS.Skies
local AesthSky = Skies.Aesth
local WinterSky = Skies.Winter
local GalaxySky = Skies.Galaxy
local VibeSky = Skies.Vibe
local sky = lighting:FindFirstChild("Sky")

local icon6 = Icon.new()
	:setImage(4458806371)
	:setCaption("Graphics")	
	:setTheme(Themes.BlueGradient)
	icon6:setMenu({

	Icon.new()
		:setLabel("Vibe")
		:setProperty("deselectWhenOtherIconSelected", true)
		:setTheme(Themes.BlueGradient)
		:setCaption("Vibe Graphics")	
		:bindEvent("selected", function() 
			wait(0.5)
			sky.Parent = Skies
			VibeSky.Parent = lighting
		end)
		:bindEvent("deselected", function()
			Skies:FindFirstChild("Sky").Parent = lighting
			VibeSky.Parent = Skies
		end)
	,

	Icon.new()
		:setLabel("Winter")
		:setProperty("deselectWhenOtherIconSelecteds", true)
		:setTheme(Themes.BlueGradient)
		:setCaption("Winter Graphics")	
		:bindEvent("selected", function() 
			wait(0.5)
			sky.Parent = Skies
			WinterSky.Parent = lighting
			local colorc = lighting.ColorCorrection 
			colorc.Saturation = -0.4
		end)
		:bindEvent("deselected", function() 
			Skies:FindFirstChild("Sky").Parent = lighting
			WinterSky.Parent = Skies
			local colorc = lighting.ColorCorrection 
			colorc.Saturation = -0.2
		end)

	,
	Icon.new()
		:setLabel("Galaxy")
		:setProperty("deselectWhenOtherIconSelected", true)
		:setTheme(Themes.BlueGradient)
		:setCaption("Galaxy Graphics")	
		:bindEvent("selected", function() 
			wait(0.5)
			sky.Parent = Skies
			GalaxySky.Parent = lighting
		end)
		:bindEvent("deselected", function() 
			Skies:FindFirstChild("Sky").Parent = lighting
			GalaxySky.Parent = Skies
		end),

	Icon.new()
		:setLabel("Aesthetic")
		:setProperty("deselectWhenOtherIconSelected", true)
		:setTheme(Themes.BlueGradient)
		:setCaption("Aeshetic Graphics")	
		:bindEvent("selected", function() 
			wait(0.5)
			sky.Parent = Skies
			AesthSky.Parent = lighting
			local colorc = lighting.ColorCorrection 
			colorc.Saturation = -0.4
			colorc.TintColor = Color3.fromRGB(238, 233, 255)

		end)
		:bindEvent("deselected", function() 
			Skies:FindFirstChild("Sky").Parent = lighting
			AesthSky.Parent = Skies
			local colorc = lighting.ColorCorrection 
			colorc.Saturation = -0.2
			colorc.TintColor = Color3.fromRGB(255, 248, 237)
		end)
})

This is absolutely beautiful! Thank you for creating this module.

1 Like

there seems to be a slight issue with the size offset and position,

that’s weird. are you using the latest version?

1 Like

Oops my bad seems to have in stalled a old version, but very cool do you plan to continue developing it, adding new features?

image
i dont get whats wrong, could anyone help me here?

You cannot declare variables inside a table {}.

1 Like

has anyone figured out a solution for this? im havin the same issue

have you tried using icon:setProperty(“deselectWhenOtherIconSelected”, true) instead

Ya, i did thats the issue tho it deselects the other icon thats inside the other menu, when its supposed to only deselect the ones inside the menu

there seems to be an issue with Captions, their size ratio compared to the icons is kinda big.

image
@iamEvanRBLX
the inset can change depending on the device.

@GalacticInspired @K0_zzy
Thanks for the bug reports, I’ll investigate soon.