Skip to content

Focus Navigation

Overview

Focus Navigation is a collection of libraries used to build UI that can be navigated using directional input, like a gamepad or keyboard, in a more feature-rich way. The word "focus" in this library can be thought of as an expansion upon the existing concept of "selection".

Some common uses include:

  • Easier keybinds and callback mappings
  • Custom behavior for containers when selection enters their UI tree
  • Managing logic for the currently selected object
  • Detecting what input method the user is utilizing

...and more!

General Use

The primary public interface for this library is through React via ReactFocusNavigation, but non-React helpers are also provided in FocusNavigation. Most features built using this library will use one of these options combined with InputHandlers to manage keybinds and callbacks.

Here is a quick overview of these modules:

  • ReactFocusNavigation - Provides useful hooks and providers that interface with the generic FocusNavigationService within React components. This includes mapping keybinds, setting focus behaviors, etc.

  • FocusNavigation - The core, unwrapped logic undearneath ReactFocusNavigation; this interface may be useful for more complex custom behavior, or for developers who do not wish to use React.

  • InputHandlers - A utility package that defines input handling callbacks which can be used with either ReactFocusNavigation or FocusNavigation directly. Breaks down callbacks by input state (ie. press, release, hold).

Internal Packages

Focus Navigation is driven by these generic under-the-hood libraries. Most users should be unconcerned with these details, but non-React users or library developer may have interest in using their capabilities directly:

  • EventPropagation - Allows events to be propagated down and back up the tree of UI descendants; used under the hood by FocusNavigation
  • FocusBehaviors - Defines some default container focus behaviors, which can be used to support app navigation concerns like restoring focus properly when returning to a page from a modal

Supplementary Resources

This library expands upon the existing concept of "selection" in the Roblox game engine. These resources for selection may also be useful: