| virtualized-ui

Navigate list items with arrow keys. Focus state is tracked and scrolled into view.

Click list, then use ↑↓ arrows

200 emails · ↑↓ navigate · Home/End jump

Enable keyboard navigation and wire up the handler:

const { focusedIndex, handleKeyDown } = useVirtualList({
  data,
  getItemId: (item) => item.id,
  enableKeyboardNavigation: true,
});

<div
  ref={containerRef}
  tabIndex={0}
  onKeyDown={handleKeyDown}
>

↑↓ Move focus

Home End Jump to first/last

Option	Type	Default
`enableKeyboardNavigation`	`boolean`	false
`focusedIndex`	`number`	—
`onFocusedIndexChange`	`(index) => void`	—

Keyboard Navigation