Tweaking spatial navigation for TV browsing

By Daniel Davis

One of the biggest challenges designing content for TVs is navigation. Not only are there several different methods that can be used to navigate a page, but none of them provide the perfect blend of convenience and practicality, at least not yet. At the time of writing, a user could be controlling their TV browsing session with any of the following devices:

  • A remote control with a D-pad (with keypad)
  • A remote control with a touchpad or similar (with full keyboard)
  • A gyroscopic mouse
  • An infrared pointer
  • A touchscreen mobile phone or tablet

Currently the most widely used by far is the regular remote control with basic up, down, left, right and select buttons. Using directional controls like this is referred to as spatial navigation and is essential to understand to create a great TV experience. It is also the same navigational method used on mobile phones with keypads and non-touch devices such as Amazon's Kindle.

Testing spatial navigation

Beyond the browser on TVs and similar web-connected devices, spatial navigation is also available in Opera on its other popular platforms. Developers can easily test spatial navigation on their desktop machines:

An eye-opening exercise is to browse a few popular sites using only spatial navigation. Although it probably won't be impossible, it is likely to be frustrating with the cursor seeming to focus on elements at random. Television adds an extra layer of frustration and that's due to the infrared connection between the remote control and the TV. This causes a noticeable delay of up to half a second or so between pressing a button on the remote control and the cursor moving on the screen. Consequently, any mistake by the user or unexpected movement of the cursor is particularly expensive in terms of time wasted. Fortunately, we can alleviate a lot of this with CSS3.

Controlling navigation with CSS3

The CSS3 Basic User Interface specification for directional focus navigation is refreshingly simple both to explain and to implement. It's purpose is to enable you to specify which element should receive focus when a user presses one of the directional buttons. For example, if the user is focused on your copyright notice at the bottom of a page and presses the down arrow key, you could tell the cursor to focus on your logo at the top of the page. The CSS code for that would be something like this:

/* CSS */
#copyright {
    nav-down: #logo;

Note that this can be applied to any CSS selector, but the property's value must be the ID of an element, i.e. preceded by #. Not surprisingly, other possible property names are nav-up, nav-left and nav-right. As you can see, it's a very straightforward enhancement to implement and although it won't be noticed by in a desktop or touchscreen environment, for users relying on D-pad to navigate, it can improve their experience remarkably. Just make sure you fully test it yourself before publishing, to avoid any nasty surprises.

Note: Often you will want to control the look of the spatial navigation highlight, or even suppress it completely. This can be done by manipulating the outline CSS property, so for example you could use outline: 2px solid rgba(0,0,0,0.0); to suppress the highlight.


Here's an example of spatial and CSS navigation. It shows two identical groups of photos—try using just the left and right arrows to move from photo to photo. The first group relies on the browser's spatial navigation algorithm whereas the second group uses CSS navigation, enabling the user to scroll through the photos with ease.


Particularly on devices with a simple set of directional keys, spatial navigation is a far more natural way of navigating a page than a simple "jump to next/previous link" approach – and with a sprinkling of CSS, developers can further tweak the order in which elements receive focus.

This article is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported license.


The forum archive of this article is still available on My Opera.

  • photo


    Monday, January 23, 2012


    thanks for documentation/manual about controling spatial navigation. Its very usefull for me, but...

    i try to use css property nav-up,nav-left,... and i was stunned, that it doesn't work for me. But your example works fine. (I use opera 11.51 for linux)
    So i copy source from your example to my server and try it again. It works fine.
    I find diferent between my using of nav property and yours. You use css property float for img tag. And thats is important. It looks like, that without float property for img tag, css nav property doesnt work!

    solution(for me):
    Add img tag in div and use css nav property on div like this:
    <xmp><div id="1" style="nav-left:#8; nav-right:#2;"><img src="images/nasa1.jpg" ></a></div></xmp>

    div tag doesnt have other css properties
  • photo


    Tuesday, August 7, 2012

    Ok, I have this working, but what is bothering me right now with this is the focus/hover/selection style of an image.

    I can change how the selector looks for text links, but I cannot change the selector look for images, it's always blue border with a translucent blue fill.

    Any ideas?

    Sorry, got it to work with:
    a img:hover { background: #f00; outline: rgba(0,0,0,0) thin solid; }

    :) :) :)
  • photo

    Li Chang Wei

    Monday, December 10, 2012

    Can I let an element is focused automatically after loaded?
  • photo


    Wednesday, December 18, 2013

    I just got to this amazing site not long ago. I was actually captured with the piece of resources you have got here. Big thumbs up for making such wonderful blog page!
No new comments accepted.