useListFocus
Manages keyboard navigation within a linear list following WAI-ARIA menu/listbox/toolbar patterns. Supports arrow key navigation (vertical, horizontal, or both), Home/End for boundaries, optional wrap-around, RTL, and Escape to close. Opt into hasRovingTabIndex for composite widgets (toolbars, segmented controls, tab strips) that own a single tab stop. Suitable for dropdown menus, toolbars, and any 1D focusable list.
Signature
useListFocus<T extends HTMLElement = HTMLElement>(options: UseListFocusOptions = {}): UseListFocusReturn<T>| Name | Type and behavior |
|---|---|
options | UseListFocusOptions · optionalConfiguration object for list focus behavior. All fields are optional. |
options.itemSelector | string · optional · default '[role="menuitem"]'Selector for focusable items within the list. |
options.boundarySelector | string · optionalSelector identifying a list boundary, for lists that contain nested lists of the same kind (e.g. a menu with submenu flyouts). When set, item collection and key handling are scoped to this level's own container. Typically '[role="menu"]'. |
options.wrap | boolean · optional · default trueWhether arrow navigation wraps around at the ends. |
options.onEscape | () => void · optionalCallback when Escape key is pressed (e.g., close menu). Supplying it also consumes the key (preventDefault); without it Escape passes through to the surrounding layer. |
options.orientation | 'horizontal' | 'vertical' | 'both' · optional · default 'vertical'Navigation orientation. 'horizontal' uses ArrowLeft/ArrowRight, 'vertical' uses ArrowUp/ArrowDown, 'both' accepts all four arrows. |
options.hasHomeEnd | boolean · optional · default trueWhether Home/End jump to the first/last enabled item. |
options.hasRovingTabIndex | boolean · optional · default falseOpt into roving-tabindex ownership: the hook stamps a single tab stop (one item tabindex="0", the rest -1), repairs it as items mount/unmount or toggle disabled, and moves it with arrow navigation. When false, the hook only moves focus and never touches tabindex. |
options.hasCaretGuard | boolean · optional · default falseWhen true, arrow keys are not stolen from a nested text input/textarea whose caret is not at the boundary in the direction of travel (or that has a selection), and are never stolen from a nested contenteditable (rich-text editor / chat composer). Preserves inline text editing within the list. |
| Name | Type and behavior |
|---|---|
listRef | React.RefObject<HTMLElement | null>Ref to attach to the list container element. |
handleKeyDown | (e: React.KeyboardEvent) => voidKey down handler to attach to the list container. |
handleFocus | (e: React.FocusEvent) => voidFocus handler for the container. Keeps the roving tab stop in sync when hasRovingTabIndex is enabled; a no-op otherwise, so it is always safe to attach. |
focusItem | (index: number) => voidFocus a specific item by index (clamped to valid range). |
focusFirst | () => booleanFocus the first enabled item. Returns true when an item was focused. |
focusLast | () => booleanFocus the last enabled item. Returns true when an item was focused. |
ownsEvent | (e: React.KeyboardEvent) => boolean |
getItems | () => HTMLElement[]This level's focusable items in DOM order (already scoped by boundarySelector). Build typeahead targets from this instead of re-querying. |
Usage
Manages keyboard navigation within a linear list following WAI-ARIA menu/listbox/toolbar patterns. Supports arrow key navigation (vertical, horizontal, or both), Home/End for boundaries, optional wrap-around, RTL, and Escape to close. Opt into hasRovingTabIndex for composite widgets (toolbars, segmented controls, tab strips) that own a single tab stop. Suitable for dropdown menus, toolbars, and any 1D focusable list.
- Set orientation to 'horizontal' for toolbars and tab bars, 'vertical' for dropdown menus.
- Provide an onEscape callback for menus/dropdowns to return focus to the trigger.
- Enable hasRovingTabIndex (and hasCaretGuard when the widget can contain text inputs) for toolbar-style composites that should be a single tab stop.
- Use for 2D grid navigation; prefer useGridFocus for grids and calendars.