fiveway is a TypeScript library for rich web applications that want to support keyboard navigation and have precise control over what is focused Get to know more
From now on let go of your mouse. This demo is controlled by keyboard. Arrow buttons work as expected, press enter to select and backspace works as back button. Pressing back resets you to start.
If you are curious how does the navigation tree for this page looks open the devtools by clicking the "fiveway" button in bottom right corner. There you can see the tree structure and inspect specific nodes by clicking on them.
Start
Directional stack: vertical
Directional stacks are the most common type of navigation container. They can be either vertical or horizontal and handle movement in respective directions. Use up/down arrow buttons to navigate this example
Item 1
Item 2
Item 3
Item 4
Item 5
Directional stack: horizontal
Directional stacks are the most common type of navigation container. They can be either vertical or horizontal and handle movement in respective directions. Use up/down arrow buttons to navigate this example
Item 1
Item 2
Item 3
Item 4
Item 5
Initial focus
Containers can be configured to focus specific child by default.
Item 1
Item 2
Item 3
Item 4
Item 5
Captured focus
Focus can be captured inside a container. In that case moving outside the container by arrow keys is not possible. Capture can be escaped via explicit action. In this example you can escape by pressing Back button
Item 1
Item 2
Item 3
Item 4
Item 5
Virtual list
This is an example of navigation node with advanced handler setup. While virtual lists are not part of fiveway they can be easily implemented by extending vertical hander with custom one.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Virtual grid
This is an example of navigation node with advanced handler setup. While virtual grid are not part of fiveway they can be easily implemented by extending grid handler with custom one.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Spatial navigation
Spatial navigation works with real-time node positions. When directional move action is received closest non-overlapping node in given direction is focused.