@elemental/ui / Class

LmnKeyboardNavigationManagerDirective

A directive that manages keyboard navigation among a group of elements.

This directive coordinates keyboard navigation behavior for a collection of elements marked with LmnKeyboardNavigationItemDirective. It supports:

  • Different navigation directions (horizontal, vertical, or both)
  • Wrapping navigation (continuing from last to first element and vice versa)
  • Grid-based navigation with row and column coordinates
  • Type-ahead functionality for quick selection by typing
  • Tab-based or arrow-key-based navigation modes
  • Customizable state and focus management
  • Accessibility enhancements for screen reader users

Properties

NameTypeDescription
active
r
InputSignalWithTransform<boolean, unknown>
allowCrossKeysNavigation
r
InputSignalWithTransform<boolean, unknown>
allowedModifierKeys
r
InputSignal<LmnModifierKey[]>
defaultState
r
InputSignal<LmnKeyboardNavigationManagerState | undefined>
direction
r
InputSignal<LmnKeyboardNavigationManagerDirection>
scopeElement
r
InputSignal<HTMLElement | (() => HTMLElement) | undefined>

Pass an element which will be used as root for the search of child list element. When passed, only direct descendant of the element will be considered

typeAhead
r
InputSignalWithTransform<boolean, unknown>
typeAheadDebounceInterval
r
InputSignalWithTransform<number, unknown>
wrap
r
InputSignalWithTransform<boolean, unknown>

Methods

setActiveItem()

No documentation has been provided.

Presentation
setActiveItem(index: number, focus: boolean = false): void;
Parameters
NameTypeDescription
index
number
focus
boolean
Returns
void