Svelte actions are plain functions applied to DOM elements via the use: directive. They run when the element mounts, set up event listeners or observers, and clean up automatically on destroy. @rokkit/actions provides actions for keyboard navigation, gestures, and visual effects.

How actions work

Apply an action with use:actionName or use:actionName={options}. The action sets up its behavior on mount and tears down on destroy — no lifecycle management needed:

<div use:someAction={options} onsomeevent={handler}>...</div>

navigable — keyboard navigation

The lightweight keyboard navigation action. Add use:navigable to any container and handle the custom events it dispatches. Events fire on keyup (not keydown). Default orientation is vertical (ArrowUp/Down = previous/next):

Events dispatched by navigable:

Options: orientation ('vertical'|'horizontal'), nested (boolean — enable collapse/expand), enabled (boolean — disable all key handling).

Visual and interaction actions

Additional actions for visual effects and interaction patterns:

All exported actions

Related

• @rokkit/states — Controllers that pair with the navigator action
• Navigator — How the navigator action and controllers work together