How do I make a circular Menu GUI?

Hello, I was just wondering, How would one make a circular menu GUI, Much like the ones in CBRO, BRM5, and as well as the default emote system Roblox implemented a while back.

Example of what I’m trying to achieve;


All of which require a mouse to hover and click on them - It’s not a circular GUI where you have to press a button or such to switch between them.

Some ideas I’ve gotten was that they’d use some art design software to do this (which is most likely) but the thing is the image buttons always overlap each other rendering it difficult to click. Is there some property I could use to change the overlapping and/or crop something?

Overlapping issue:

Solutions I’ve tried so far? Honestly tried to make it fill up the whole image button but it’s very scuffed.
Can’t really figure out how they did it.

I’ve tried searching it up on the web & dev forum and it always comes up with a solution of “use UI Corner to make a frame circular.” - I already know how to do that and it doesn’t help at all with what I’m trying to achieve.

TL;DR Trying to make a circular menu for educational purposes for future projects. Not sure how they did it, Image buttons always overlap each other rendering it difficult to press each individual one.


I think I get it. In your art design software, try designing the whole shape, and use transparent Image/Text buttons to achieve the desirable result. Hope I helped! Make sure you import the image as an ImageLabel!

Kind regards,
Kostiskat :heart:

Where if you we’re to click for example the image button on the left, It would still consider you as pressing the one on the bottom (I know there is something called zindex, Although I would like to make it so it wasn’t overlapping each other at all in terms of clicking it entirely.)

Ill try that. Thank you for the suggestion. Ill get back to you soon. :smile:

1 Like

Try inserting a UI corner and making it as round as you can

Hey! So the technical term for this type of UI is called Radial UI

The process for this is pretty simple once you get it down. Here are some good resources to help you out!

I couldn’t find any good resources on how to create the image so I’ll walk through it with you.

  1. Use almost any external image editor and make a simple circle. I’ll be using Paint .NET.

  2. For this example, I’ll be cutting it into 4ths so I’ll have 4 UI options. you should end up with a single 4th:

  3. Save and load the image into Roblox exactly how it is. Don’t crop it or anything of the sort.

  4. Duplicate the image 4 times and rotate each 90 degrees

  5. Done, now you have the basic foundation for a radial UI!


Wouldn’t this overlap each other via a clicking function though?

You are absolutely right, that’s why I’d argue that a clicked event for a UI like this isn’t ideal. I wouldn’t rely on the Button.MouseButton1Click event when making radial UIs

I would use UserInputService or ContextActionService and essentially make your own clicked event for it where depending on where the Users mouse position (or for controller the thumbstick vector) is and then execute the function based on that result. You can tie this into UI effects as well and create a really quality UI compared to what you could make with a clicked event.

Well that shucks. Although its alright.

Ive used ContextActionService & UserInputService before, although it just makes it a tiny bit harder to make work. Thank you so much for the article and the suggestion!

Hope it works well :smile:

Did it work out with my solution?

Just Like a Blackhawk that amazing!


It could work although not very efficient + It wouldn’t cover the area, Since it’s a box. Meanwhile the image/circular GUI I’m trying to achieve is a complex shape in which doesn’t really correspond with it.

It was a good suggestion but not very efficient sorry to say. As Stratiz said in his thing, Basically rotating the image 90 degrees on each angle then using UserInputService of ContextActionService would work best I believe as said in the article of making a radial gui.

TL;DR Good idea but not really what I was looking for

detect where your mouse is on the screen (like mentioned above) and just increase the zindex of the desired image so it doesn’t overlap

think of it like a 4 regions on your screen each region will indicate the image side you want to mess with

also wouldn’t just perfectly clop the image fix overlap issue?

1 Like