TopbarPlus v2.7.6 | Construct intuitive topbar icons; customise them with themes, dropdowns, captions, labels and much more

Projects like TopbarPlus involve hundreds of hours of work and maintenance. It’s my goal to keep these projects free, open source and up-to-date, however its become increasingly difficult with Roblox’s direction of the Marketplace. If you’ve found TopbarPlus helpful, please consider reading into how Roblox can support marketplace developers and open-source creations.

TopbarPlus

:floppy_disk: Source Code | :open_book: Documentation | :ocean: Playground

Construct dynamic and intuitive topbar icons. Enhance the appearance and behaviour of these icons with features such as themes, dropdowns and menus.

-- This assumes you place the TopbarPlus module (called 'Icon') under ReplicatedStorage
local Icon = require(game:GetService("ReplicatedStorage").Icon)

-- Here we construct a simple icon
Icon.new()
	:setImage(6326373239)
	:setLabel("Nanoblox")
-- This retrieves the theme module under Icon
local iconModule = game:GetService("ReplicatedStorage").Icon
local Icon = require(iconModule)
local Themes = require(iconModule.Themes)

-- Here we utilise the many other icon methods. You can view all of them at the docs.
Icon.new()
	:setImage(6326373239)
	:setLabel("Nanoblox")
	:setCaption("Nanoblox Caption")
	:setTip("Open Nanoblox Panel (v)")
	:bindToggleKey(Enum.KeyCode.V)
	:bindToggleItem(nanobloxFrame)
	:setProperty("deselectWhenOtherIconSelected", false)
	:set("iconFont", Enum.Font.GothamSemibold)
	:setRight()
	:notify()
	:setTheme(Themes.YourThemeName)
	:bindEvent("selected", function(icon)
		print("selected!")
	end)
	:bindEvent("deselected", function(icon)
		print("deselected!")
	end)
	:setDropdown({
		Icon.new()
			:setLabel("Item 1")
		,
		Icon.new()
			:setLabel("Item 2")
		,
		Icon.new()
			:setLabel("Item 3")
		,
		Icon.new()
			:setLabel("Item 4")
		,
	})

:rocket: Features


:sparkles: What’s new


:clapper: Get Started


:package: Installation


:bulb: API


:iphone: Tutorial

Credit

Big thanks to these people for their resources and contributions:


Final

TopbarPlus is free and open source! You’re welcome to use and modify this for any of your projects. Credit back to this thread is greatly appreciated although I won’t send the popo after you if you don’t. :policeman:

I won’t be able to respond to all questions, however I pinky-promise that I’ll read your comments. We’ve put hundreds of hours into this resource so its always a joy to hear your feedback!

That’s all amigos, enjoy :pineapple:

717 Likes
Roblox like UI buttons
How do I make topbar text?
How do I make a button in
Fakejeffret Games game Credits
Kit Hub | "The Better ROBLOX Toolbox"
SFS | Cafe & Restaurant Order System
How can i make a gui like this:
How do I get a GUI to look like this?
How would i make icons like this?
How to create custom chat button?
99% Fail - Updates and Credit
Roblox UI size Troubles. [TOP BAR]
A Guide to CorePanel
Obby Virtual! [ALPHA]
GUI Support, GUI Buttons
How to make roblox TopBar GUI’s
How do you make TopBar?
How do i place gui next to hp bar?
Invite Friends Button not working... (Topbar Plus)
How would I be able to stop the color from changing after deselecting?
Need help with creating buttons located on top of the leaderboard
Making a “chat” styled button
Do you know how to make a sprint button using TopbarPlus V2?
Do you know how to make a Cash GUI using Topbarplus V2
Settings button located next to the chat
Add an extra button
Is there an easier way to do this?
Roblox LUA Module [ASK]
Spatial Voice Developer Beta
Better Chat V3 | Feature-rich custom chat with replies, rich text, message editing, and more!
How To Make GUI Next to The Chat Icon
Baums Admin v.2 - Chat Commands!
[VIDEO] Getting Started With TopbarPlus - Add Icons, Dropdowns, Menus and more to your experience
99% Fail Impossible Obby - Credit
Experiencia Plaza de las Navidillas - Información
Oscars Polygon Update Log
Attributions for Experiences
Obby Virtual! [ALPHA]
Topbar+ v1 (deprecated) | Add additional functionality and themes to your topbar
In Game Avatar Editor v2
How do i move gui next to chat box
How do i move gui next to chat box
CountryBalls RP [In a Huge Way]
In Game Avatar Editor v2
Project Delta Credits
Roblox UI size Troubles. [TOP BAR]
Copy roblox's gui and make another one beside it
How to do Open a Gui Above Default Roblox UI
TopbarPlus v2 | Construct intuitive topbar icons | Question
Experiencia Información | Grupo Español
Topgui+ Module not working as expected
What is the word for this
Roblox three dots user interface information
SFS | Banking & Economy System
Freecam+ | Freecam with mobile support, and more customizability
How to make a custom roblox gui?
RoPlay - Update Log & Attributions
Custom Topbar Buttons Module - Version 4.0.1
I can't find the name of this feature
Topbar+ v1 (deprecated) | Add additional functionality and themes to your topbar
Part Painting System!
Bug when making round system (Topbar+ Icons)
How would I make a GUI that looks like Roblox?
How do we make buttons near to chat button?
Topbar+ v1 (deprecated) | Add additional functionality and themes to your topbar
How to put a text label on the TopBar
How to put a text label on the TopBar
Freecam+ | Freecam with mobile support, and more customizability
Best way to make buttons next to chat and menu button
PLS PLAY - Update Log & Attributions
UIShelf v3.3.2 - Easily Mimic the CoreGui

Amazing to see a second version to this! Definitely going to try this out!

16 Likes

The new horizontal menus look fantastic! Thank you for keeping this fantastic resource fresh!

11 Likes

I absolutely loved the first version of TopbarPlus and have used it on numerous projects. This second iteration of it seems even more fantastic, can’t wait to use it on my future projects! Keep up the good work.

12 Likes

This is amazing! Such a huge improvement…

10 Likes

Amazing! It’s Looks Very Good! I’m Gonna Try This Out! :wink:

4 Likes

Woah, good job on this! I hope this is seen as much as your other projects. I’m going to very much use this in my own projects.

4 Likes

I LOVE the look of the bars. It really does make it seem like it’s a part of Roblox, which will help make the UI cleaner! I remember when this first was created and man, you’ve added so many things! Nice work!!

5 Likes

Woah! I will use it in my games!

3 Likes

Thank you very much for sharing this.
I would like to make a feature request, if I may.

The ability to Parent buttons and menus to other frames than just the TopBar.
Something like icon:setParent(someFrameOutsideTopbar)

This would make it possible to easily make other GUI like tabs and other kinds of menus outside of just the TopBar.

I’m thinking of things like perhaps an inventory with tabs to sort the items. You would open the inventory with the button on the TopBar but you would also create the tabs that filter the inventory. All in the same system.

3 Likes

This is certainly a consideration (and potentially a new project in itself) although for TopbarPlus we’ll likely remain within it’s original intention to provide game developers with easy-to-add and easy-to-customise topbar icons and software developers and runtime applications (like admin commands) with the ability to seamlessly integrate their own icons into others games.

5 Likes

Hey, I have a dropdown menu in-game and am trying to figure out how to add functions to the individual icons. I wanted to achieve allowing a player to morph themselves when they press an option using HD admin. Could you break it down for me?

You can achieve this with setDropdown combined with bindEvent demonstrated here:

https://1foreverhd.github.io/TopbarPlus/features/#dropdowns

If you’re attempting to morph someone via HD Admin I’d recommend waiting until Nanoblox is released which has a greatly more reliable API. For the time being you could morph people using HumanoidDescriptions

7 Likes

For HD Admin users: it’s now compatible with both v1 and v2 so you’ll no longer experience any issues if you previously attempted to use v2 in your game alongside it

5 Likes

Is there a way to make it work with ResetOnSpawn?

3 Likes

Sure can, simply utilise the new IconController.clearIconOnSpawn(icon) in v2.2.0 (or just re-add the topbarplus model).

e.g. after you’ve constructed all your icons do:

local icons = IconController.getIcons()
for _, icon in pairs(icons) do
	IconController.clearIconOnSpawn(icon)
end
7 Likes

I think I have explained myself wrong, what I want is that when the player reappears the Guis that are with the ResetOnSpawn option activated implemented in the topbarplus, the guis will appear again and that they can be opened from the top bar, as before this version when I put ResetOnSpawn the GUI became unusable.

What I mean by this is: When the player appears, the usable ResetOnSpawn guis reappear, not that it is deleted.

—If you have done what I wanted to tell you then it is a mistake for being a new option or I did something wrong—

3 Likes

This is what the ResetOnSpawn property is for. If you set it to true then your UI objects will be destroyed no matter what.

Assuming your topbaricons are constructed in a location that does persist (such as starterplayerscripts) and you want to bind them to GUIs that reset on spawn, then you could achieve this by listening for game.Players.PlayerAdded in the script that persists, then using icon:bindToggleItem and icon:unbindToggleItem when the desired GUIs are removed/added back in.

The above method is just over complicating things though - you’d honestly be better off fixing whatever problems you have with ResetOnSpawn and setting this property to false.

5 Likes

Well, thanks for your time, I’ll try to see if I can find a way to do what I have in mind.

By the way, I love this project that you are doing, I look forward to many more improvements and other amazing projects from you.:+1::star_struck:

4 Likes

I keep running into this problem when creating a second topbar button: image

No matter what the :setOrder is, they always stack ontop of eachother, my code is:


    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 gui = playerGui:WaitForChild("gameUI")

    local lplayer = game.Players.LocalPlayer

    -- Apply BlueGradient Theme

    IconController.setGameTheme(Themes.BlueGradient)

    if lplayer.UserId == 817819194 then

    local panel = Icon.new()

    :setImage(6384095729, "deselected")

    :setImageYScale(0.7, "deselected")

    :setImage(6384109922, "selected")

    :setLabel("Close Panel", "selected")

    :bindToggleItem(gui.Panel)

    panel:setCaption("StudioOS Panel")

    :setOrder(1)

    panel:notify()

    panel:bindToggleKey(Enum.KeyCode.V)

    else

    print("Player not whitelisted.")

    gui.Panel:Destroy()

    end

    local suggest = Icon.new()

    :setImage(6384752804, "deselected")

    :setImageYScale(0.7, "deselected")

    :setImage(6384109922, "selected")

    :setLabel("Close", "selected")

    :bindToggleItem(gui.Suggest)

    suggest:setCaption("Suggest")

    suggest:bindToggleKey(Enum.KeyCode.C)

    :setOrder(2)
3 Likes