Navigation

	This page is a work in progress! This page is incomplete, important information might be missing. Please wait for the page to be finished, or you can help by correcting or filling in more information.

A good navigation experience is important, so users can use your app quickly and efficiently.

Basic Navigation Methods

Arrow Cursor

Cursor navigation is the easy path for a developer. However you should avoid using cursor navigation, unless it is really required, as it is very slow for the user to navigate your app.

Selecting

This method requires only slightly more work for the developer.

We will use a list as an example. For the most basic list navigation system, you just need two things:

1. Group of elements that have a tabindex (you can use HTML classes here)
   + More details

   It is recommended to have the tabindex counting up instead of setting all of them to -1 to keep track of the currently selected element. You can of course just use Javascript variables to keep track of this as well if you want.

2. Key handler to select other elements in the list.

And here is how it will work:

1. User presses ArrowUp or ArrowDown
2. Code adds or subtracts 1 from the currently selected tabindex
3. If the element exists, focus() it. Otherwise, go to the beginning or end of the list, and then focus() that instead.

Turn Cursor On and Off

You can turn the cursor on and off depending on where the user is in your app.

The app must be privileged and have spatialnavigation-app-manage in the permissions section of the manifest.

Once the proper permissions are in place, you may set navigator.spatialNavigationEnabled to true or false to turn the cursor on and off.

navigator.spatialNavigationEnabled = true;  //cursor on!!!
navigator.spatialNavigationEnabled = false; //cursor off!!!!!

Extras

Note: these are only suggestions! You may use these and modify them to your heart's content, or just ignore them and use your own idea.

Jump To Index of Alphabet

Arrow Keys

In a vertical list (without any tabs), the ArrowLeft and ArrowRight buttons usually do nothing. You can map these to jump to the entry starting with the next letter of the alphabet, to make navigation easier.

For example, if the user scrolls down to the "F" section, pressing ArrowRight will bring them to the start of the "G" section.

Number Pad

You can also use the number pad, as they usually have letters marked on them. For example, 2 will jump to A, 3 will jump to D, and so on.

See also

D-Pad navigation on KaiOS Developer Portal
Emulated Cursor on KaiOS Developer Portal
amanboss9/naviboard on Github