# KeyboardNavigation

```ts
import { FocusManagement, KeyboardNavigation, Rectangle } from "@pibbl/core";
```

`KeyboardNavigation` uses [`KeyboardNavigationProps`](/reference/types/elements-components/#keyboardnavigationprops) and wraps recursive
[`PibblNode`](/reference/types/elements-components/#pibblnode) children. Place it inside `FocusManagement` to opt into deterministic
arrow-key movement among logical focus targets. It does not create native DOM
controls or infer an accessibility tree.

```tsx
<FocusManagement>
  <KeyboardNavigation mode="directional">
    <Rectangle style={{ width: 80, height: 32, fill: "#2563eb" }} />
  </KeyboardNavigation>
</FocusManagement>
```

See the [Directional navigation live example](/playground/#/examples/focus-and-keyboard/directional-navigation).

## API details from source

<span id="api-KeyboardNavigation"></span>

Adds one directional-navigation boundary without adding identity.

```ts
KeyboardNavigation: PibblComponent<KeyboardNavigationProps>
```

Related API: [KeyboardNavigation](/reference/components/keyboard-navigation/), [PibblComponent](/reference/types/elements-components/#pibblcomponent), [KeyboardNavigationProps](/reference/types/elements-components/#keyboardnavigationprops).

### Parameters

- **`props`** — Authored component inputs, supplied through JSX or createElement. See the linked
props and style types.

### Throws

When called directly; Pibbl mounts this component through JSX or createElement.

### See also

[KeyboardNavigationProps](/reference/types/elements-components/#keyboardnavigationprops)

[View source — packages/core/src/lib/focus/policy-components.ts:121](/source/packages/core/src/lib/focus/policy-components-ts/#L121)

## Implementation guidance for agents

Read the [Input, focus, and native HTML companion](/agents/topics/input/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Focus and arrow navigation](/minimal-examples/events/focus/): Two logical targets participate in Tab focus and directional keyboard navigation. [Plain source](/minimal/events/focus.tsx)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.