Topbar+ | Add additional functionality and themes to your topbar

image

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:

topbar+ example


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

Q5YnIuR

’Rainbow Pop’ Example

FXVoIS9


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

image


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:


Resources

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

470 Likes

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

23 Likes

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

12 Likes

So i can change the tone too?!

5 Likes

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

9 Likes

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.

4 Likes

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!

4 Likes

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

2 Likes

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

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

7 Likes

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!

3 Likes

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!

4 Likes

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)


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
1 Like

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

Screen Shot 2020-05-14 at 6.51.15 pm

1 Like

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.

4 Likes

Is there anyways to scooch it over a bit?

Screen Shot 2020-05-14 at 6.56.06 pm

2 Likes

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

image

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

5 Likes

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

3 Likes

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

3 Likes

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?

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

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

Really cool module!

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.

3 Likes