How do I use arrows to move between links that are "above/bellow/left/right"?

I want to built an app that the user will navigate using the arrows (to move from link to link) and then press Enter to enter another page.

I can use ab and Shift+Tab to go between links and then press Enter to go to that link, but I need to use the arrows for moving around. And what’s more, I want to have Electron understand somehow that a link is “above” or “left” to another so that pressing Left will go to the left link, and pressing Up will go to the above link. I’m trying to create a UI that resembles MS-DOS [1].

I can use the Mousetrap library to bind whatever keys I want:

Is there a way to do this? I can’t find a resource.


This example should be easy to adopt, but personally I’d add tab-index attributes on the focussable elements

This example works but I need to also go left-right. Your hint about tab-index lead me to:

which seems to be what I’ve been looking for. I’ll give it some test and I’ll report back success or failure!