# EuiArrowKeyNavigableDirective

**Type:** directive



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.

```html
<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


**Selector:** `[euiArrowKeyNavigable]`
