Framework-agnostic keyboard navigation for lists and grids, driven by data-*
attributes. Any key can move focus — arrows are only the default — and native
Tab navigation keeps working.
pnpm add @mixedrays/keyroveMark the navigable elements with data-keyrove-item, give them a tab stop, and
pass the container's keydown event to keyRove:
<ul id="menu">
<li data-keyrove-item tabindex="0">Inbox</li>
<li data-keyrove-item tabindex="0">Drafts</li>
<li data-keyrove-item tabindex="0">Sent</li>
</ul>import { keyRove } from '@mixedrays/keyrove';
document.querySelector('#menu').addEventListener('keydown', (e) => keyRove(e));keyRove takes anything shaped like a keydown event, so React, Vue and Svelte
synthetic events work without an adapter. The
installation guide shows the
wiring in each framework.
- Introduction — how it works, which keys move focus, and what it leaves to you.
- Examples — live demos of lists, grids, custom keys, roving tabindex, nested roots and more.
- API reference — every attribute, option and export.
Read the contributing guide to learn how to set up the repository, run the checks, and propose changes.
Every version is listed in the changelog and on the releases page.
This project is licensed under the terms of the MIT license.