# @leanadmin/alpine-arrow-focus

> Focus elements using arrows in Alpine.js

Latest version **0.1.1** (published 2021-01-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @leanadmin/alpine-arrow-focus
pnpm add @leanadmin/alpine-arrow-focus
yarn add @leanadmin/alpine-arrow-focus
bun add @leanadmin/alpine-arrow-focus
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2021-01-06 |
| First published | 2021-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Samuel Štancl |
| Maintainers | samuelstancl |
| Keywords | alpine, alpinejs |

## Links

- npm: https://www.npmjs.com/package/@leanadmin/alpine-arrow-focus
- Repository: https://github.com/LeanAdmin/alpine-arrow-focus
- Homepage: https://github.com/LeanAdmin/alpine-arrow-focus#readme
- Issues: https://github.com/LeanAdmin/alpine-arrow-focus/issues
- npm.io page: https://npm.io/package/@leanadmin/alpine-arrow-focus

## Recent versions

- 0.1.1 (latest) — 2021-01-06
- 0.1.0 — 2021-01-06

## README

# Alpine Arrow Focus

An Alpine package for building menu screens that can be navigated using arrows, by replicating the tab focus behavior.

## Usage

```html
<div x-data="arrow_focus()">
    <button x-spread="item" class="p-8 focus:bg-gray-500">First item</button>
    <button x-spread="item" class="p-8 focus:bg-gray-500">Second item</button>
    <button x-spread="item" class="p-8 focus:bg-gray-500">Third item</button>
</div>
```

Pressing the up & down keys will now switch between items. When the down key is pressed on the last item, the first item will get selected. When the up key is pressed on the first item, the last key will get selected.

## Installation

### CDN module

```html
<script>
import { arrow_focus } from 'https://unpkg.com/@leanadmin/alpine-arrow-focus@0.1.0';

window.arrow_focus = arrow_focus;
</script>
```

### Node.js

```
import { arrow_focus } from '@leanadmin/alpine-arrow-focus';

// If needed: window.arrow_focus = arrow_focus;
```

---
_Source: https://npm.io/package/@leanadmin/alpine-arrow-focus · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._