Skip to content
Go to file
This branch is 18 commits behind gauntface:master.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

D-Pad Navigation Library

alt text

This library is designed to make it quick a simple to support D-Pad Navigation in a web app.


To support D-Pad navigation with this library, you need to do the following:

<script src="./scripts/dpad-nav-lib.min.js" />
  • Add a tabindex and class name dpad-focusable for any element you want to be focusable. For Example:
<div class="grid-item dpad-focusable" tabindex="0">
        <img class="thumb" src="./images/thumbs/thumb01.jpg" />
        <div class="title">Item 1</div>
  • Apply styling in your css for the focus pseudo class.
.grid-item:focus {
        outline: none;
        background-color: rgb(149, 165, 166);
  • Apply styling for when the user clicks on a focused element via the clickdown class.
.grid-item.clickdown {
        background-color: rgb(189, 195, 199);

You should now be supporting D-Pad navigation.


This library will trigger a normal focus and click event.

element.addEventListener('focus', function(e) {
        console.log('Element Focused');
}, true);

element.addEventListener('click', function() {
        console.log('Element Clicked');
}, true);

Adding and Removing DOM Elements

The way the library works is that on page load or page resize, it will calculate the graph of where each nodes closest neighbours are, based purely on each elements position in the viewport.

What the library does not do, is recalculate the graph if you add or remove elements. To support this, you need to update the elements in the graph and their connections, which is done by calling:


Tabindex and Browser Focus

With the tabindex property you can determine the order in which a view is focused when you hit the tab key. The ordering is ignored by this library, tabindex is needed to ensure the browser allows an element to gain focus, however the order will still be applied if you hit tab on the keyboard.


There is a debug option to display lines which indicate the link between each node.


alt text


A javascript library to add basic spatial navigation to your web app. Useful until spatial focusing becomes the norm in browsers




No releases published


No packages published
You can’t perform that action at this time.