Spatial Navigation

By  on  

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!

SpatialNavigation boasts features like:

  • Completely stylable focus elements
  • Definable regions
  • Integration with jQuery
  • Awesome performance

A simple example usage of SpatialNavigation:

// Initialize
SpatialNavigation.init();

// Define navigable elements (anchors and elements with "focusable" class).
SpatialNavigation.add({
  selector: 'a, .focusable'
});

// Make the *currently existing* navigable elements focusable.
SpatialNavigation.makeFocusable();

// Focus the first navigable element.
SpatialNavigation.focus();
<body>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <div class="focusable">Div 1</div>
  <div class="focusable">Div 2</div>
</body>
/* Add style to the focused elements */
a:focus, .focusable {
  outline: 2px solid red;
}

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.

Recent Features

  • By
    5 More HTML5 APIs You Didn&#8217;t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    Control Element Outline Position with outline-offset

    I was recently working on a project which featured tables that were keyboard navigable so obviously using cell outlining via traditional tabIndex=0 and element outlines was a big part of allowing the user navigate quickly and intelligently. Unfortunately I ran into a Firefox 3.6 bug...

  • By
    Event Delegation with MooTools

    Events play a huge role in JavaScript. I can't name one website I've created in the past two years that hasn't used JavaScript event handling on some level. Ask yourself: how often do I inject elements into the DOM and not add an...

Discussion

  1. John

    I wish I saw this post 6 months ago when I was building a prototype for a set top box interface!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!