Skip to main content

useArrowKeyListNavigation

function useArrowKeyListNavigation(__namedParameters): void;

Enables ArrowUp/ArrowDown keyboard navigation across focusable items in a container.

Parameters​

ParameterType
__namedParametersArrowKeyListNavigationOptions

Returns​

void

Example​

const listRef = useRef<HTMLDivElement>(null);
useArrowKeyListNavigation({
  containerRef: listRef,
  itemSelector: '[data-keyboard-nav-item]',
  isEnabled: true,
  loop: true,
  scrollIntoViewOnFocus: true,
  keepOriginFocusOnNavigate: false,
  activateActiveItemOnEnter: false,
});