Allows navigation between HTML elements in one or two dimensions with non-mouse devices and unifies it with the mouse navigation experience.
Note that this is specifically built for usage within lit
or element-vir
HTML templates.
npm i device-navigation
-
Mark each element that should be navigable with the
nav()
directive:import {html} from 'element-vir'; import {nav} from 'device-navigation'; const myTemplate = html` <div ${nav()}></div> `;
-
Construct a
NavController
instance, passing in an element which is parent of all navigable elements:import {assert} from '@augment-vir/assert'; import {html} from 'element-vir'; import {nav, NavController} from 'device-navigation'; const myTemplate = html` <main> <div ${nav()}></div> <div ${nav()}></div> <div ${nav()}></div> </main> `; function setNavController() { const main = document.querySelector('main'); assert.isDefined(main); return new NavController(main); }
-
Call
NavController
methods from within listeners:import {html} from 'element-vir'; import {nav, NavController, NavDirection} from 'device-navigation'; const myTemplate = html` <main> <div ${nav()}></div> <div ${nav()}></div> <div ${nav()}></div> </main> `; function setupListeners(navController: NavController) { window.addEventListener('keydown', (event) => { if (event.code === 'ArrowUp') { navController.navigate({ allowWrapping: true, direction: NavDirection.Up, }); } else if (event.code === 'ArrowDown') { navController.navigate({ allowWrapping: true, direction: NavDirection.Down, }); } else if (event.code === 'Enter') { navController.enterInto(); } // etc. }); }
To see a full example, see the demo element.