Keyboard grid navigation with gridnav.js

Navigating long list with a keyboard can be frustrating as you either have to search for content or tab from each element to the next. Visually it is much easier to navigate as you can move around more freely.

Using gridnav.js you can allow keyboard users to use the keys or w, a, s, d to navigate around a list displayed as a grid. All you have to do is to include the script in your product and provide it with an HTML list to enhance.

You can try it out here, simply follow any of the links in the demo menu and start navigating using the cursor keys or w, a, s, d.

Please refer to the README to learn about customisation.

gridnav.js is on GitHub an Open Source. It has no dependencies and is plain vanilla JS.

Demos

<ul id="list" data-amount="8" data-element="button">
<ul class="gridnav" data-amount="5" data-element="a">
<ul id="smaller">