keyrove

Keyboard navigation for lists, grids and trees. Configure it with data attributes or JavaScript options, in any framework.

Getting started

pnpm add @mixedrays/keyrove

Mark 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));

Use an items option when you cannot add attributes to the markup. This selects the same list items without data-keyrove-item; keep their tabindex:

document
  .querySelector('#menu')
  .addEventListener('keydown', (e) => keyRove(e, { items: 'li' }));

Options override attributes one setting at a time, with scope and replacement differences.

keyRove accepts native keyboard events and compatible framework events, including React synthetic events. The installation guide shows setup for vanilla JavaScript, React, Vue and Svelte.

Documentation

• Introduction — how it works, which keys move focus, and what it leaves to you.
• Attributes and options — the two places a group can be described, and which to reach for.
• Examples — live demos of lists, grids, trees, custom keys, roving tabindex, nested roots and more.
• API reference — every attribute, option and export.

Contributing

Read the contributing guide to learn how to set up the repository, run the checks, and propose changes.

Releases

Every version is listed in the changelog and on the releases page.

License

This project is licensed under the terms of the MIT license.