Keyboard navigation action for list-like UIs — j/k, vim motions, selection
A Svelte action that adds vim-style keyboard navigation to any list. Focus the list below and use j/k or arrow keys. Press Enter to select.
Click to focus, then: j/k move · Enter select · gg/G jump · Esc clear
import { listNav } from 'jatui';
<div use:listNav={{
onSelect: (el) => openDetail(el.dataset.navId),
onEscape: () => closeDetail(),
}}>
{#each items as item}
<button data-nav-id={item.id}>{item.title}</button>
{/each}
</div>| Key | Action |
|---|---|
| j / ↓ | Focus next item |
| k / ↑ | Focus previous item |
| Enter / Space | Select focused item |
| Escape | Clear focus / selection |
| gg | Jump to first item |
| G | Jump to last item |
| {n}j / {n}k | Move n items |
| Ctrl+D / Ctrl+U | Half-page down/up |