### File

`packages/components/directives/eui-arrow-key-navigable.directive.ts`

### Description

Directive enabling keyboard arrow key navigation for focusable content within list items. Makes rich content elements keyboard-accessible by managing focus state and tabindex. Typically used in dropdown menus, list boxes, or custom navigation components.

Example :

    <div euiArrowKeyNavigable>
      <a href="#">Focusable link</a>
      <button>Focusable button</button>
    </div>

### Accessibility

- Sets tabindex="-1" to remove from default tab order while allowing programmatic focus
- Tracks focus state for visual feedback and navigation management
- Use with arrow key navigation logic in parent component

### Notes

- Element is not in default tab order but can receive focus programmatically
- Commonly paired with list navigation components that handle arrow key events
- Focus state tracked via isFocused property

### Metadata

Selector | `[euiArrowKeyNavigable]`

### Index

###### Properties

- elementRef
- isFocused

### Properties

elementRef
Type : `unknown`
Default value : `inject(ElementRef)`

isFocused
Type : `unknown`
Default value : `signal(false)`

# results matching ""

# No results matching ""