Skip to content

Features

Images

icon:setImage(shopImageId)

Labels

icon:setLabel("Shop")


icon:setImage(shopImageId)
icon:setLabel("Shop")

Notices

icon:notify()

Themes

Themes are configurable tables of information that can be applied to icons to enhance their appearance and behaviour.

When constructed, an icon will automatically apply the 'Default' theme. To expand upon this, you can create your own theme modules under Icon -> Themes) then apply these to your desired icons.

The Default theme and all theme settings can be found here.

Themes can be applied in two ways:

  1. To all icons and future icons at once: 

    local Themes = require(game:GetService("ReplicatedStorage").Icon.Themes)
IconController.setGameTheme(Themes.YourThemeName)

  2. Individually to an icon: 

    local Themes = require(game:GetService("ReplicatedStorage").Icon.Themes)
icon:setTheme(Themes.YourThemeName)

In this example, we'll apply the BlueGradient theme which automatically comes with TopbarPlus:

local iconModule = game:GetService("ReplicatedStorage").Icon
local IconController = require(iconModule.IconController)
local Themes = require(iconModule.Themes)
IconController.setGameTheme(Themes["BlueGradient"])

Deselected

Selected

Dropdowns are vertical navigation frames that contain an array of icons:

icon:set("dropdownSquareCorners", true)
icon:setDropdown({
    Icon.new()
        :setLabel("Category 1")
        ,
    Icon.new()
        :setLabel("Category 2")
        ,
    Icon.new()
        :setLabel("Category 3")
        ,
    Icon.new()
        :setLabel("Category 4")
        :setName("CategoryFourIcon")
        :bindEvent("selected", function(self)
            print(("%s was selected!"):format(self.name))
        end)
        :bindEvent("deselected", function(self)
            print(("%s was deselected!"):format(self.name))
        end)
        ,
})

Menus are horizontal navigation frames that contain an array of icons:

icon:set("menuMaxIconsBeforeScroll", 2)
icon:setMenu({
    Icon.new()
        :setLabel("Category 1")
        ,
    Icon.new()
        :setLabel("Category 2")
        ,
    Icon.new()
        :setLabel("Category 3")
        ,
    Icon.new()
        :setLabel("Category 4")
        :setName("CategoryFourIcon")
        :bindEvent("selected", function(self)
            print(("%s was selected!"):format(self.name))
        end)
        :bindEvent("deselected", function(self)
            print(("%s was deselected!"):format(self.name))
        end)
        ,
})

Captions

icon:setCaption("Shop Caption")

Tips

icon:setTip("Open Shop (v)")

Toggle Items

Binds a GuiObject (such as a frame) to appear or disappear when the icon is toggled 

icon:bindToggleItem(shopFrame)

It is equivalent to doing: 

icon.deselected:Connect(function()
    shopFrame.Visible = false
end)
icon.selected:Connect(function()
    shopFrame.Visible = true
end)

Toggle Keys

Binds a keycode which toggles the icon when pressed. 

-- When the 'v' key is pressed, the shop icon will open
-- When pressed again it will close
icon:bindToggleKey(Enum.KeyCode.V)

Corners

icon:setCornerRadius(0, 0)


icon:setCornerRadius(0, 8)


icon:setCornerRadius(1, 0)

Alignments

-- Aligns the icon to the left of the screen (next to chat if present)
-- This is the default behaviour
icon:setLeft()

-- Aligns the icon in the middle of the screen
icon:setMid()

-- Aligns the icon to the right of the screen (next to (...) if present)
icon:setRight()

Console Support

Overflows

When accounting for many device types and screen sizes, icons may occasionally, particularly for smaller devices like phones, overlap with other icons or the bounds of the screen. TopbarPlus solves this problem with automatic overflows which prevent overlaps occuring.

An overflow will appear when left-set or right-set icons exceed the boundary of the:

  • Viewport
  • Closest enabled opposite-aligned icon
  • Closest enabled center-aligned icon

These examples and more can be tested, viewed and edited at the Playground.