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

For v3 just tap DPadUp and v3 will highlight the last selected icon or the left-most icon if first time using. Then press B to unhighlight/go back. You can also use the virtual cursor to navigate to an icon and v3 will auto highlight and toggle when selected:

I think I’ll look at adding an image with UserInputService | Documentation - Roblox Creator Hub to make this more clear.

You can find all the controller support under the Gamepad module:

If you want to change the default keycode from DPadUp just do:

Icon.highlightKey = Enum.KeyCode.YOUR_DESIRED_KEYCODE

I’ve redesigned it this way to be less clunky and easier to use + customize for developers.

Thanks for the feedback!

1 Like

@robloxjw02
@deathcharge415

Thanks for the feedback! I’ll DM you both to see if we can find a better solution for this.

Thanks for help!

My goal was to modify existing dropdown by adding or removing dropdown items after some period of time, from my understanding :setDropdown() is only used when constructing a new dropdown list. I suppose it’s possible to do the same thing with a custom frame and using :clipOutside(frame), but was curious if it’s possible to do what I want with existing dropdown functions judging from the provided “onClickRelocate” menu example.

Ah gotcha!

So iconA:setDropdown({iconB, iconC}) is effectively an abstraction of:

iconB:joinDropdown(iconA)
iconC:joinDropdown(iconA)

If you wanted iconB to leave the dropdown you do:

iconB:leave()

Then to add it back to you do:

iconB:joinDropdown(iconA)

Slight disclaimer: I just need to make a slight tweak to the code to completely support this, currently you still have to call :setDropdown to construct the scrolling frame (which I’m gonna change now)

1 Like

bugs found while playtesting in studio:

when v3 sets up the containers, the size is incorrect and causes the first image below. by going into the Container module (Icon.Elements.Container), you can edit line 24 to UDim2.new(1, 0, 1, -2) which fixes it, shown in the second image

image
image

in the Default theme (Icon.Features.Themes.Default) module, on line 31 the text offset is set to -1 (first image) which causes the text to not be in-line with the icon, changing it to no offset fixes it. (second image, is this intentional?)

image
image

also, you may want to fix the packagelink

3 Likes

Great stuff man! I’m trying to figure out how to create a feature where if I click a button and don’t do anything for a while (Idling), it automatically deselects itself. Specifically, I’m working on a ‘return-to-menu’ function where after clicking the button, it prompts with ‘Are you sure?’ and only returns if confirmed.

Thanks you’re correct, I’ll update these offsets now

Will have the package published for v3 release :+1:

3 Likes

happy nuking :whale2:

Icon.new()
	:oneClick()
	:modifyTheme("Widget", "MinimumWidth", 200)
	:call(function(icon)
		local EXPIRE_TIME = 1
		local stage = 0
		local checks = 0
		local function updateLabel()
			local label = ""
			stage += 1
			if stage == 1 then
			icon:setLabel("nuke the whales 🐋")
			elseif stage == 2 then
				checks += 1
				local ourCheck = checks
				icon:setLabel("are you sure???")
				task.delay(EXPIRE_TIME, function()
					if stage == 2 and ourCheck == checks then
						stage = 0
						updateLabel()
					end
				end)
			elseif stage == 3 then
				for i = 3, 1, -1 do
					icon:setLabel(`nuking in {i}...`)
					task.wait(1)
				end
				icon:setLabel(`boom!!! 💥💥💥`)
				task.wait(2)
				stage = 0
				updateLabel()
			end
		end
		updateLabel()
		icon.selected:Connect(updateLabel)
	end)
6 Likes

Are you sure you implemented the Icon.getIcons() function since i get the following error when used:

Players.Scriptifi.PlayerGui.freecam.FreecamScript:690: attempt to call a nil value

If you have not implemented it i request you to add it as soon as possible, also what am i supposed to do instead of Icon.updateTopbar()?

If you’re using the most up-to-date version of the pre-release v3 it should be working fine:

print("Icons = ", Icon.getIcons())

image

(most up-to-date module is located in the playground, I won’t be publishing to the package until release)

What do you need .updateTopbar() for? In v3 changes are listened for so there shouldn’t be any need for a function like this.

1 Like

Is the full release of V3 still planned for Thursday/Friday? :grinning:

This is now complete :muscle:

local iconA = Icon.new()
	:setLabel("AAA")

local iconB = Icon.new()
	:setLabel("BBB")
	:call(function(icon)
		icon:joinDropdown(iconA)
	end)

local iconC = Icon.new()
	:setLabel("CCC")
	:oneClick()
	:bindEvent("deselected", function(icon, isSelected)
		print("isSelected =", isSelected)
		if icon.parentIconUID then
			icon:leave()
		else
			icon:joinDropdown(iconA)
		end
	end)

local iconD = Icon.new()
	:setLabel("DDD")
	:call(function(icon)
		icon:joinDropdown(iconA)
	end)

I would love to say yes as most my spare time is going into this. I’ll likely need to push it back to next though so I can fully test for all quirks :sad:

2 Likes

our user mobile users are experiencing issues while in portrait mode, are dropdowns for overflow removed now? it causes icons to clash and some icons cannot be seen at all. there are 3 left, 2 right and only 3 are shown from the left side seen below.
image

how it was before: (v2)
image
(blank space was beta mark, which is now gone in v3 :upside_down_face:)

1 Like

I was experimenting with a new overflow system although after some feedback decided to scrap it (the one you currently see). I’m currently finishing the final overflow system which is effectively a more optimised equivalent v2 overflows.

I don’t recommend using v3 in games where users can have portrait/narrow screens until full release!

1 Like

goodluck on it!

okay, thank you. we’ll revert back to v2 until full release

2 Likes

idk if its just an issue for me but whenever i require the module and print it, it prints a blank empty table and i get the following error:

15:44:23.229 Players.Scriptifi.PlayerGui.LocalScript:3: attempt to call a nil value - Client - LocalScript:3 15:44:23.229 Stack Begin - Studio 15:44:23.229 Script 'Players.Scriptifi.PlayerGui.LocalScript', Line 3 - Studio - LocalScript:3

You’ll need to share more code of preferably a place file

1 Like

I’m pretty happy that V3 is out but i need to get used to it now since it has more functions.

Have a question, about the cosmetics section example, how do i make one look like it’s selected by default?