The navigator Svelte action connects a controller to a container element. It intercepts
keyboard events, routes them through the controller, and syncs DOM focus and ARIA state in response.
Usage
<ul use:navigator={{ controller, onselect }}>Options
| Option | Type | Description |
|---|---|---|
controller | ListController | NestedController | The state machine to bind |
onselect | (value) => void | Called when an item is selected |
onchange | (value) => void | Called on any navigation change |
How it works
The navigator reads data-path attributes on child elements to identify items. Set data-path on each item element and the navigator handles keyboard routing, type-ahead
search, and ARIA attribute updates automatically.
Clicks on data-path elements are intercepted by the navigator — do not add separate onclick handlers on those elements, as this causes double-handling.
Related
- Controllers — state machines used with the navigator
- Custom Primitives — building accessible components
- Actions — other available Svelte actions