Spatial Navigation

David Walsh

2 years ago

Spatial navigation is the ability to navigate to focusable elements based on their position in a given space. Spatial navigation is a must when your site or app must respond to arrow keys, a perfect example being a television with directional pad remote. Firefox OS TV apps are simply HTML5 wrapped in a chromeless browser shell (Gecko) so most apps require spacial navigation to ensure the physical television remote is useful. Mozilla’s Luke Chang has created SpatialNavigation to make implementing JavaScript navigation easy and flexible!

While the demo above is fairly simple, we know that dynamic apps are not simple. The SpatialNavigation repository features more than a dozen unique example usages of the utility, from the most basic to very complex. I encourage you to explore these demos to see all that SpatialNavigation has to offer.

Spatial navigation can also play a role on desktop websites; many sites these days use a flexbox grid layout which could make great use directional arrows. You’d need to be careful about CMD+up and CMD+down for full page scrolling, of course, but spatial navigation in that space would be useful.