[Open-Source] RblxTopBar

I made the “RblxTopBar” module recently because I was bored and wanted to make an open-source module.
What is RblxTopBar? RblxTopBar is a module to easily create image buttons on the top bar!

Module asset

Features:

  • Multiple Icons
  • Fast use
  • Easy to understand
  • Customizable
  • etc…

How to use it

First you need to create a button

local module = require(script.TopBar) --require the module
local button = module.new(
   {  --parameters
      ["Name"] = "Name", --button name
      ["IconId"] = 0, --icon id
   }
)

The button object has the following functions:

button:resizeIcon(size:Udim2) --set the icon size
button:resetSize() --reset the icon size to default
button:setIconId(id:number) --set the icon id

Finally you can connect some events to the button!

button.Hover:connect(function()
   --on Hover function
end)
button.UnHover:connect(function()
   --on UnHover function
end)
button.Click1:connect(function()
   --MouseButton1 click event
end)
button.Click2:connect(function()
   --MouseButton2 click event
end)

Full documentation in the GitHub page

6 Likes

What’s the plus point of this module compare to TopbarPlus? Thank you.

1 Like

do you have any photos of how this looks in game?

1 Like

I would say that it is so easy to use.

So many of these exist - in fact I already created one. Mine has all of your features and more, its also easier to understand rather than putting parameters in a table.

-- module source:

-- VAR --
local Players = game:GetService("Players")
local Player = Players.LocalPlayer
local Topbar = script:FindFirstChild("Topbar")
local IconTemp = script:FindFirstChild("NewIcon")
Topbar.Parent = Player:WaitForChild("PlayerGui")
-- SECTION 1 --
local UIShelf = {}
UIShelf.__index = UIShelf
UIShelf.__type = "UIShelf"
UIShelf.Version = 3

function UIShelf.new()
	local Class = setmetatable({}, UIShelf)
	Class._ = IconTemp:Clone()
	return Class
end

function UIShelf:bindIconEvent(eventType : string, func : (...any) -> ())
	if eventType == "MouseClick" then
		self._.Background.MouseButton1Down:Connect(func)
	elseif eventType == "MouseEnter" then
		self._.Background.MouseEnter:Connect(func)
	elseif eventType == "OnRemoving" then
		self._.Background.Destroying:Connect(func)
	elseif eventType == "MouseLeave" then
		self._.Background.MouseLeave:Connect(func)
	elseif eventType == "TouchTap" then
		self._.Background.TouchTap:Connect(func)
	elseif eventType == "MouseMoved" then
		self._.Background.MouseMoved:Connect(func)
	end
end

function UIShelf:setRight()
	self._.Parent = Topbar:FindFirstChild("TopBarFrame"):FindFirstChild("RightFrame")
end

function UIShelf:setLeft()
	self._.Parent = Topbar:FindFirstChild("TopBarFrame"):FindFirstChild("LeftFrame")
end

function UIShelf:setTopbarState(enabled : boolean)
	Topbar.Enabled = enabled
end

function UIShelf:getTopbarState()
	return Topbar.Enabled
end

function UIShelf:remove()
	self._:Destroy()
end

function UIShelf:setOrder(order : number)
	if order <= 0 then
		self._:Destroy()
		error("LayoutOrders less than 1 on the left side are not allowed")
	end
	self._.LayoutOrder = order
end

function UIShelf:setName(name : string)
	if name == "LeftFrame" or name == "RightFrame" or name == "TopBarFrame" then
		self._:Destroy()
		error(name .. " is not a valid name")
	else
		self._.Name = tostring(name)
	end
end

function UIShelf:setImage(imageId : number)
	self._:WaitForChild("Background"):WaitForChild("Icon").Image = "rbxassetid://" .. imageId
end

function UIShelf:newNotification(amount : number)
	local NotificationsCount = self._.NotificationsCount
	local BadgeContainer = NotificationsCount.Parent.Background.BadgeContainer
	local Badge = BadgeContainer.Badge
	local TextLabel = Badge.Inner.TextLabel
	
	NotificationsCount.Value += amount

	NotificationsCount.Changed:Connect(function(changedValue)
		TextLabel.Text = NotificationsCount.Value
		if changedValue >= 1 then
			BadgeContainer.Visible = true
		elseif changedValue == 0 then
			BadgeContainer.Visible = false
		end
		if changedValue >= 10 and changedValue <= 99 then
			Badge.Size = UDim2.new(0, 27, 0, 24)
		elseif changedValue >= 100 then
			Badge.Size = UDim2.new(0, 37, 0, 24)
			TextLabel.Text = "99+"
			NotificationsCount.Value = 100
		elseif changedValue <= 9 then
			Badge.Size = UDim2.new(0, 24, 0, 24)
		end
	end)
end

function UIShelf:clearNotifications()
	self._.NotificationsCount.Value = 0
end

function UIShelf:getNotifcations(): number
	return self._.NotificationsCount.Value
end

function UIShelf:setVisibility(enabled : boolean)
	self._.Visible = enabled
end

function UIShelf:returnIconImage(): number
	return self._:WaitForChild("Background"):WaitForChild("Icon").Image - "rbxassetid://"
end

function UIShelf:returnIconOrder(): number
	return self._.LayoutOrder
end

function UIShelf:returnAllButtons(): {}
	local table_ = {}
	for index, value in pairs(Topbar:FindFirstChild("TopBarFrame"):GetDescendants()) do
		if value.Name ~= "RightFrame" or "LeftFrame" then
			table.insert(table_, value)
		end
	end
	return table_
end

if game:GetService("GuiService"):IsTenFootInterface() == true then
	local allButtons = UIShelf:returnAllButtons()
	for i,v in pairs(allButtons) do
		v.Visible = false
	end
end

return

Well, you can have more functions but I made mine for fun.

You copied TopbarPlus too. You shouldn’t be talking my guy.

The OP is doing the exact same thing you did.

I wouldn’t exactly say copying, it’s probably more inspired.

However, I do need to ask what advantages does this have over Topbar+, a trusted and easy to use module?

Its basically the exact same thing as TopbarPlus, except a bit more simple and less functions and customizability.

There’s a line between copying and inspiration.

1 Like

This is a interesting post, The above posts are comparing it to Topbar+ and UIShelf. Honestly it is good enough, I love the simplicity of this. No extra stuff, Nothing. Just a purely simple module.

I did tell you what you’re copying.

Read what I said:

It may not have the same code but it’s literally the same thing.

Give me one notable difference between your module and TopbarPlus, besides “easier to understand than TopbarPlus”.


My point is that you’re being a hypocrite. You shouldn’t come to this post saying “many of these exist” when you pretty much did the same thing the OP did.

what do you want man, i’m just pointing something as an alternative that has already existed for a while now. it’s not that big of a deal for it to turn into some stupid argument because i ‘copied’ topbar plus. there’s honestly no point in making something that you are heavily inspired by anymore, because people will just name it as a worse copy and make you look bad. I get it, you are heavily inspired by @ObliviousHD, but that doesn’t mean you always have to defend that person.

so please just stop. or at least carry this to pm’s.

Give me one notable difference your module and TopbarPlus

Clicking the icon does not display a gradient, which should be aoption by the way.
The notifications look realistic to buttons in CoreGui, which in Topbar Plus they do not. Really all my resource is, is a mimic of CoreGui buttons which can be helpful in lots of situations where you don’t want things to stand out.

(sorry if this comes as mean to you, i’m just telling the truth.)

2 Likes

@/ForeverHD actually.

Agreed.

I just hate hypocrites for some reason.

1 Like

its more like tgifs tbh. but there is nothing imaginable between copied and inspired (atlrast for me)

1 Like