BpDirectional is a renderless Vue component that implements keyboard navigation for elements within it. This includes arrow keys as well as Home and End.
Keyboard navigation is done based on screen layout - that means that even if content reflows based on breakpoints, directional keys should still move focus how the user would expect.
This functionality is built off of the composable component UseDirectional.
<style>
li a {
display: block;
}
</style>
<main>
<bp-directional>
<ul style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
<li>
<a href="#"><span>Consectetur non laborum!</span></a>
</li>
<li>
<a href="#"><span>Adipisicing natus laboriosam?</span></a>
</li>
<li>
<a href="#"><span>Dolor accusamus quis</span></a>
</li>
<li>
<a href="#"><span>Elit iste amet.</span></a>
</li>
<li>
<a href="#"><span>Elit nulla provident?</span></a>
</li>
<li>
<a href="#"><span>Adipisicing sit quae?</span></a>
</li>
<li>
<a href="#"><span>Dolor quisquam explicabo.</span></a>
</li>
<li>
<a href="#"><span>Adipisicing molestiae facilis.</span></a>
</li>
<li>
<a href="#"><span>Ipsum officiis ipsa?</span></a>
</li>
<li>
<a href="#"><span>Lorem possimus nam.</span></a>
</li>
<li>
<a href="#"><span>Adipisicing provident ipsum</span></a>
</li>
<li>
<a href="#"><span>Amet odio repudiandae.</span></a>
</li>
<li>
<a href="#"><span>Consectetur impedit praesentium!</span></a>
</li>
<li>
<a href="#"><span>Dolor sunt praesentium</span></a>
</li>
<li>
<a href="#"><span>Adipisicing molestias quis</span></a>
</li>
<li>
<a href="#"><span>Adipisicing aspernatur cum.</span></a>
</li>
<li>
<a href="#"><span>Dolor numquam aut.</span></a>
</li>
</ul>
</bp-directional>
</main>
<template>
<nav ref="nav">
<slot />
</nav>
</template>
<script setup>
import { ref } from 'vue'
import useDirectional from '@resources/js/components/UseDirectional.js'
const nav = ref(null)
useDirectional(nav)
</script>