https://github.com/archtechx/alpine-arrow-focus
Focus elements using arrows in Alpine.js
https://github.com/archtechx/alpine-arrow-focus
Last synced: 9 months ago
JSON representation
Focus elements using arrows in Alpine.js
- Host: GitHub
- URL: https://github.com/archtechx/alpine-arrow-focus
- Owner: archtechx
- License: mit
- Created: 2021-01-06T22:46:13.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-01-06T23:35:10.000Z (over 5 years ago)
- Last Synced: 2025-04-19T20:10:46.711Z (about 1 year ago)
- Language: JavaScript
- Size: 5.86 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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
First item
Second item
Third item
```
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
```html
```
### Node.js
```
import { arrow_focus } from '@leanadmin/alpine-arrow-focus';
// If needed: window.arrow_focus = arrow_focus;
```