Topbar+ v1 (deprecated) | Add additional functionality and themes to your topbar

[ForeverHD (Ben)]

v1 is outdated and unsupported, we highly recommend users checkout the greatly improved v2 instead:

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] Source Code | Documentation | Playground Construct dynamic and intuitive top…

v1 (outdated)

Topbar+ is a lightweight application that expands upon Roblox’s topbar to give you greater control and customisability.

• Add and remove topbar icons with ease
• Customise the design of your icons with themes
• Enhance the default toggle behaviour
• Easily configure toggle menus for your icons
• Prompt notifications (icon:notify())

---

First look

Creating an icon is simple as:

local icon = iconController:createIcon("Shop", 4882429582, 2)

Utilising Topbar+ and the features highlighted below, we can create beautiful and intuitive topbars in minutes, fully supported on PC, mobile and console:

---

Themes

By default, Topbar+ mimics the standard Roblox topbar. Themes provide you with the ability to enhance the design and behaviour of this.

iconController:setGameTheme(theme) -- Apply a theme to all icons
icon:setTheme(theme) -- Apply a theme to a specific icon

‘Soft Blue’ Example

’Rainbow Pop’ Example

---

Toggle Menus

Easily connect GuiObjects to appear and hide when toggled:

icon:setToggleMenu(PlayerGui.ShopGui.ShopFrame)

---

Captions

icon:setCaption("Caption Example")

---

Labels

icon:setLabel("Label Example")

---

Dropdowns

Dropdowns are simple-to-setup menus that by default appear when an icon is right-clicked on PC or long-pressed on mobile:

local dropdown = icon:createDropdown({...})

This default behaviour is configurable using dropdown:set(settingName, value).

For instance, the following settings will bind the dropdown to its icon when toggled and modify the default click-and-hide behaviour:

dropdown:set("bindToIcon", true)
dropdown:set("closeWhenClicked", false)
dropdown:set("closeWhenClickedAway", true)

(Original behaviour left, modified behaviour right)

---

Tips

icon:setTip("Tip Example")

---

Cell Size & Alignment Support

icon:setCellSize(40)
icon:setLeft() -- default
icon:setMid()
icon:setRight()

---

Gradients

---

Console Support

---

Customisable Corners

---

Installing & Using

To learn how to install and use Topbar+, visit the about section of the docs: https://1foreverhd.github.io/HDAdmin/projects/topbarplus/about/#example

---

See For Yourself!

You can play around with an open source example here:
Topbar+ Playground - Roblox

---

Resources

• Documentation
• Repository
• MainModule
• Playground

Topbar+ is actively maintained by the HD Admin Team; feel free to report bugs, suggest features and make pull requests at our repository.

[Aiden_12114 (Aiden)]

@ForeverHD I absolutely love your work! Keep it up!

[MouseyCherie]

Ooo! I really like this :o This is so cool! It would be really cool if they added something like this

[Incapters]

So i can change the tone too?!

[loueque (paperbagger)]

This is actually great for developers who want an icon or button for their game that can match or fit in with the new Topbar that got recently released! I guess it’s cool to show and give other developers making something in their games.

Personally, this would be helpful for me because I’m working on a game and need a lot of space for buttons, so this helps out a lot! Great job on it!

My hat is off to you!

[ForeverHD (Ben)]

You’ll be able to gain complete styling control over all icons, except the core Roblox menu. Hopefully going forwards we’re given further freedoms, such as transparent/hidable core icon backgrounds, enabling us to enhance the topbar even more.

[IAmPinleon (Pinleon)]

Hey there, just trying to let you know that my thing currently isn’t working, here is my script:

-- Require the IconController
local replicatedStorage = game:GetService("ReplicatedStorage")
local topbarPlus = replicatedStorage:WaitForChild("Modules"):WaitForChild("Topbar+")
local iconController = require(topbarPlus.IconController)

-- Create a shop menu
local player = game.Players.LocalPlayer
local plrGui = player:WaitForChild("PlayerGui")
local gui = plrGui:WaitForChild("Core")

local theme = {
    -- TOGGLE EFFECT
    ["toggleTweenInfo"] = TweenInfo.new(0.35, Enum.EasingStyle.Quad, Enum.EasingDirection.Out),

    -- OBJECT PROPERTIES
    ["button"] = {
        selected = {
            ImageTransparency = 0.3,
            ImageColor3 = Color3.fromRGB(0, 170, 255),
        },
        deselected = {
            ImageTransparency = 1,
        },
    },
    ["image"] = {
        selected = {
            ImageColor3 = Color3.fromRGB(255, 255, 255),
        },
        deselected = {
            ImageColor3 = Color3.fromRGB(255, 255, 255),
        },
    },
    ["notification"] = {
        selected = {
            Image = "http://www.roblox.com/asset/?id=4882430005",
            ImageColor3 = Color3.fromRGB(255, 255, 255),
        },
        deselected = {
            Image = "http://www.roblox.com/asset/?id=4882430005",
            ImageColor3 = Color3.fromRGB(0, 170, 255),
        },
    },
    ["amount"] = {
        selected = {
            TextColor3 = Color3.fromRGB(0, 170, 255),
        },
        deselected = {
            TextColor3 = Color3.fromRGB(255, 255, 255),
        },
    },
}

-- Create an icon called 'Shop', with image '4882429582' and order of 1
local chat = iconController:createIcon("Chat", 5023984820, 1)
chat:setToggleMenu(gui:WaitForChild("Chat")) -- Set the shop menu to be toggled by the icon
chat:setTheme(theme)

And the explorer:

is Icon:setToggleMenu() deprecated? I can’t see it in your documentary.

BTW I love this!

[dibblydubblydoo (poo)]

Wow, this is awesome, I have bookmarked your post for future references. Thank you!

[ForeverHD (Ben)]

Your example appears to be working, can you expand upon the issue?

@IAmPinleon

is Icon:setToggleMenu() deprecated? I can’t see it in your documentary.

Good spot, looks like I missed that from the docs! You can now find the API reference here: https://1foreverhd.github.io/HDAdmin/projects/topbarplus/icon/#settogglemenu

[Aiden_12114 (Aiden)]

Hello @ForeverHD I have multiple questions (2) to ask you.

1. Is creating themes as simple as it looks? By just looking at this it looks pretty simple.

2. Is there anyways to apply a theme to the CoreGUI?

Thanks @ForeverHD! I love your Topbar+ project!

[KieranIsADev]

This is great! Huge fan of your work! HD Admin is great as it lets me test my anticheat - this is just as good so I can have amazing shop GUIs and stuff on the new topbar! I used to hate it, but with this, I think the new topbar is great!
Edit: Ty for the like!

[ForeverHD (Ben)]

@Aiden_12114

Is creating themes as simple as it looks?

In short, a theme is simply a table of information describing how an icon should behave and look for a particular toggle state.

You can break down a theme into three sections:

1. The appearance of the icon when selected (i.e. objectName.selected)
2. The appearance of the icon when deselected (i.e. objectName.deselected)
3. How the icon transitions between these appearances when toggled (i.e. toggleTweenInfo)

An ‘object’ is simply a gui component that makes up the icon, such as the icons background (an ImageButton), its image (an ImageLabel), its notification background, etc. You can view the names and description of these here.

For example, if we want our icon to have a blue background, we simply say ‘I want the icon to look blue (i.e. Color3.fromRGB(0, 170, 255)) when it’s selected and deselected’:

["button"] = {
    selected = {
        ImageColor3 = Color3.fromRGB(0, 170, 255),
    },
    deselected = {
        ImageColor3 = Color3.fromRGB(0, 170, 255),
    },
},

If a property is not specified for a ‘toggle state’ (i.e. the selected and deselected dictionaries), then it is automatically filled in with the default topbar properties.

You then apply this theme by doing:

newIcon:setTheme(theme)

---

@Aiden_12114

1. Is there anyways to apply a theme to the CoreGUI?

Good question! To apply a theme to all objects, simply retrieve all the icons after creating them, and apply a theme to each one:

local theme = {} -- Your desired theme
local icons = iconController:getAllIcons()
for _, icon in pairs(icons) do
	icon:setTheme(theme)
end

[Aiden_12114 (Aiden)]

Now, with the button themes, it seems that the Chat Button doesn’t change for me.

[ForeverHD (Ben)]

The CoreGuis themselves are not possible to modify in-game, so you have to use iconController:createFakeChat() to achieve this. This method creates a ‘fake’ chat icon that mimics the real chat core gui icon, which can then have a theme applied to it.

[Aiden_12114 (Aiden)]

Is there anyways to scooch it over a bit?

[ForeverHD (Ben)]

The fake chat icon should automatically align to the original core guis position:

I’ll message you to try and find out what’s causing that.

[Blockzez]

Is it possible to make this right aligned for RTL languages like Arabic and Hebrew?

[ForeverHD (Ben)]

Great suggestion, I’ll look at exploring a property and/or method to achieve this.

[kingerman88]

@ForeverHD

In your themes GIFs you were able to change the roblox icon, is this possible through use of a script? Or is it only possible through the use of changing your own client/modifying it through studio once in game?

@Aiden_12114

Also I was also able to get this bug through this code

local StarterGui = game:GetService("StarterGui")
StarterGui:SetCore("TopbarEnabled", false)

Really cool module!

[Blockzez]

How do I remove this? Now it’s appearing on every Roblox game without anything modified.
OS: Windows 10 Enterprise

Looks like Roblox updated this again :(, if it ain’t broke don’t fix it.