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

v3.0.0 is out! :star2:
Get started using the v3 release post below:
Say hello to v3 :wave: Click here to learn everything you need to know: what’s new, what’s changed and how to get your game transitioned over in a few steps
features example REDUCED


:floppy_disk: GitHub | :open_book: Documentation | :ocean: v3 Playground

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

TopbarPlus is used by Roblox’s top games and applications including The Strongest Battlegrounds, Toilet Tower Defense and HD Admin.



:rocket: Features

features example REDUCED

:sparkles: What’s new

:clapper: Get Started

:package: Installation

:bulb: API

:iphone: Tutorial

There is no v3 tutorial… yet! If you’d like to make one to be featured here, pop me a message @ForeverHD :happy3:


Big thanks to these people for their contributions and resources:

@Lucke0051 for his many feature ideas and code contributions
@cxmeels for assistance with overflows
@MrAsync for workflow guidance
@grilme99 for their past support
@Inctus for his past support
@hayper1919 for multiple improvements to the repository, help introducing wally, code cleanup, and ongoing help with luau typechecks and luau autocompletes
@iamEvanRBLX for the initial hybrid support for the new topbar
@LordMerc for help with the documentation and general feedback
@ValiantWind for help with testing and feedback
@2jammers for help retrieving values in features such as captions
@medallyon for help setting up Wally
@PeZsmistic for help with clamping objects within screen bounds
@pobammer for the package Janitor
@stravant for the package GoodSignal
@g1mmethemoney for maintaining the TopbarPlus TypeScript Port


TopbarPlus v3 uses the Mozilla Public License v2.0. You can use this application free of charge; all you need to do is provide credit back to this resource (such as link to this post) and to open source any significant changes you make to the package.


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

That’s all amigos, enjoy :pineapple:

Roblox like UI buttons
Kit Hub | "The Better ROBLOX Toolbox"
How do I make topbar text?
How do I make a button in
Fakejeffret Games game Credits
SFS | Cafe & Restaurant Order System
TopbarPlus leaderstats
How can i make a gui like this:
GUI Support, GUI Buttons
How would i make icons like this?
Baums Admin v.2 - Chat Commands!
How to create custom chat button?
Do you know how to make a Cash GUI using Topbarplus V2
How do I get a GUI to look like this?
Freecam+ | Freecam with mobile support, and more customizability
CountryBalls RP [In a Huge Way]
Obby Virtual! [ALPHA]
Roblox UI size Troubles. [TOP BAR]
What is the word for this
Roblox's New TopBar GUI Doesn't Match With TopBarPlus Icons
99% Fail Impossible Obby - Credit
How do i place gui next to hp bar?
TopbarPlus v2 | Construct intuitive topbar icons | Question
Topgui+ Module not working as expected
99% Fail - Updates and Credit
How do you make TopBar?
How to make roblox TopBar GUI’s
A Guide to CorePanel
Best way to make buttons next to chat and menu button
Need help making cash display with topbar plus
Making a “chat” styled button
ICYMI: Experience controls test starting November 20!
Chat with Voice Developer Beta
SFS | Banking & Economy System
Fps Counter For TopBarPlus
Topbar+ v1 (deprecated) | Add additional functionality and themes to your topbar
Is there an easier way to do this?
Roblox LUA Module [ASK]
Feedback on new gui system
Customizable FOV Changer
Outside | Credits
How to put a text label on the TopBar
How to make buttons like these? - look at screenshot
How can I make such a button next to the chat button?
How to put a text label on the TopBar
Identical Gui to CoreGui?
How do I know when the chat button is clicked?
Custom leaderboard?
Topbar+ v1 (deprecated) | Add additional functionality and themes to your topbar
SimpleTopbar | Easy and Simple top bar system (closed for development)
Attributions for Experiences
Shadow Mode: Anonymous Moderating Tool
Shadow Mode: Anonymous Moderating Tool
Roblox Menu Remake | Answering: What can and can't developers do on Roblox?
Topbar+ v1 (deprecated) | Add additional functionality and themes to your topbar
No Title Game - Credits
How can I add a button to the Roblox topbar GUI?
Good Modules to Add
Social Chat v2 | Roblox's #1 Open-Sourced chatting resource
Make ui buttons styled the same as roblox ui style
TopbarPlus Errors
My settings button in UI scales with device's screen
Oscars Polygon Update Log
Obby Creator - Credits
How do we make buttons near to chat button?
Topbar Invite Friends
How to I add a GUI to the top of the screen similar to the chat button in roblox?
Anyone know how to add these additional settings in the top hand bar?
How would I make a GUI that looks like Roblox?
How to match the default Roblox CoreGui properties?
Studio Beta for Experience Controls Available Now
Bug when making round system (Topbar+ Icons)
What can I do to fix it? TopBarPlus problem
Why is this simple code not working?
Part Painting System!
Experiencia Plaza de las Navidillas - Información
ICYMI: Experience controls test starting November 20!
Inconcinnity Credits
TopBarPlus multiple buttons bug
Better Chat V3 | Feature-rich custom chat with replies, rich text, message editing, and more!
AudioDeviceInput Issues
How can I add buttons to the TopBar?
How can I add buttons to the TopBar?
Topbar+ v1 (deprecated) | Add additional functionality and themes to your topbar
Social Chat | Enhance your experience with spectacular social chat features!
Custom Topbar Buttons Module - Version 4.0.1
RoPlay - Update Log & Attributions
How to use PackageLinks for product/asset based items?
How to make a custom roblox gui?
Roblox three dots user interface information
Experiencia Información | Grupo Español
[VIDEO] Getting Started With TopbarPlus - Add Icons, Dropdowns, Menus and more to your experience
Adding button to the expand/collapse menu
How to do Open a Gui Above Default Roblox UI
Copy roblox's gui and make another one beside it
How to add more ui inside the topbar ui
Roblox UI size Troubles. [TOP BAR]
Project Delta Credits
[2 YEARS] Wolfite's Obby System - Easily make an obby
In Game Avatar Editor v2
Obby UI Feedback
GUI similar to chat
How do i move gui next to chat box
How to Produce a Topbar based on TopBarSafeInsets
How do i move gui next to chat box
In Game Avatar Editor v2
Any way to make a topbar without using Topbar module
How to add a UI inside the Topbar UI
Topbar+ v1 (deprecated) | Add additional functionality and themes to your topbar
Obby Virtual! [ALPHA]
How would I go about creating something like this
Freecam+ | Freecam with mobile support, and more customizability
How To Make GUI Next to The Chat Icon
PLS PLAY - Update Log & Attributions
How would I be able to stop the color from changing after deselecting?
Need help with creating buttons located on top of the leaderboard
Do you know how to make a sprint button using TopbarPlus V2?
Settings button located next to the chat
How to disable roblox ingame menu?
Add an extra button

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


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


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.


This is amazing! Such a huge improvement…


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


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.


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!!


Woah! I will use it in my games!


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.


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.


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:

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


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


Is there a way to make it work with ResetOnSpawn?


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

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—


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.


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:


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


    if lplayer.UserId == 817819194 then

    local panel = Icon.new()

    :setImage(6384095729, "deselected")

    :setImageYScale(0.7, "deselected")

    :setImage(6384109922, "selected")

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


    panel:setCaption("StudioOS Panel")





    print("Player not whitelisted.")



    local suggest = Icon.new()

    :setImage(6384752804, "deselected")

    :setImageYScale(0.7, "deselected")

    :setImage(6384109922, "selected")

    :setLabel("Close", "selected")