Using arrow keys to navigate UI

Hello, I would like to recreate arrow key navigation on PC or the joystick for PS4/5 and Xbox. How can I do this?

As you can see from the video below, a yellow highlight surrounds the button the player is currently on and also plays a sound each time you navigate.

Time: 0:00 to 0:03

Edit: I’m awaiting responses…

I suppose you could disable the mouse from being visible. Add a UI prompting the user to use arrow keys.

Then using UserInputService & indexes - basically assigns a value to each UI then upon going up/down (for example) you add a line that highlights the frame that the index is on.

Then finalise it when the player presses enter/return it does whatever you wish to do.

2 Likes

So, I used ContextActionService, and it worked, to an extent. The only thing is that you can still go up even though the bind is down.

ContextActionService:BindAction("KeyNavigation", NavigateKey, false, Enum.KeyCode.Up, Enum.KeyCode.Down)
1 Like

Could you show me an example of that?

Cause I tried using a for i = 1, 5 loop and it highlighted them all.

1 Like

I wanted to have my own custom highlight effect, but I just used .SelectedObject and it worked?

Please help. I’m not sure what to do.

1 Like

If I am reading this issue correctly and you haven’t already, check out GuiObject’s NextSelectionDown, Up, Left and Right. Enable “Selectable” on the selectable GuiObjects.

I have not done this myself but reading this forum post I believe the left joystick is the default.