How to Produce a Topbar based on TopBarSafeInsets

Hey there,

I am creating this topic here because I am looking for help to produce GUIs based on the new ScreenInsets called “TopBarSafeInsets”, which is new and available for a few devices on the Roblox whenever you’re in-game.

From what I remember, once hearing the thoughts of others regarding this update of integrating this new notched screen support, the plugin “Topbar Plus” would be deprecated due to it. This statement was from the words of someone who once said it, but it can be outdated… Likewise, I only build my GUIs with the default settings from Roblox Studio, but this time, I want to use these recent ScreenInsets.

Can someone help me out with this and how I can produce it? It would help me a lot to comprehend building more and more interfaces for any Roblox project!



I believe that’s TopbarPlus V3, please press F9 and see if the game you’re in uses topbarplus.


The CoreUISafeInsets enum is not new; it’s the TopBarSafeInsets that’s new as a result of the Experience Controls Beta Update from the end of 2023.

According to the example from the Roblox Creator Documentation Site, setting ScreenGui.ScreenInsets to TopBarSafeInsets will automatically resize/position the descendants of the ScreenGui to fit between the controls and the device safe area.

Additional examples can be found on the announcement thread for the new Experience Controls:

1 Like

Oh yes, that is indeed true! The name was odd while writing because I didn’t remember the original. However, as you have mentioned, I have updated the description and title of the topic, my bad!

In the instructions, I see that the person used a code snippet, but I am not entirely sure if it is based on the size of Roblox’s newest topbar… From what I see in the sample you provided, they already know the size…

1 Like

The frame doesn’t have a fixed size because the amount of space available in the Topbar can change during runtime. Consequently, they would not be able to know how much space is available in the Topbar at all times unless they keep track of its current value, which is what the function is doing:

Whenever the TopbarInset Rect object changes, the function runs so that the script will be able to modify the frame based on its new size.

It’s dynamically updating the size of the frame to match the exact offset for the TopbarInset’s width and height (as well as basing its position on the top left corner of the available area) since it will vary depending on the size of the device’s screen AND how much space is available after opening / closing any of the Topbar menus.

And even though the example gifs still show the original concept for the TopBar (with buttons at both the top left and top right corners of the screen), it appears as if the TopbarInset was implemented in a way that will always provide an accurate representation of the available space in the Topbar no matter if the CoreGui design is updated in the future.

I think I answered your questions with that, but if I didn’t, please let me know and I’ll try to explain further :grin:

1 Like