Typewriter
Simple and lightweight key navigation utilities and components.
npm install @blueprintui/typewriter
Inline
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/[email protected]/include/keynav.js/+esm';
</script>
<bp-keynav loop layout="inline">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</bp-keynav>
Grid
keynav follows the aria grid navitation patterns. keynav computes the number of columns by computing the number of items from the CSS property grid-template-columns
. If the columns are dynamic you can explicity set the column count <bp-keynav columns="4">
.
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/[email protected]/include/keynav.js/+esm';
</script>
<bp-keynav layout="grid" columns="4">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</bp-keynav>
Block
keynav has three directions: inline
, block
, and all
. The default is inline
. The block
direction is useful for creating a vertical list of items. The loop
attribute will loop the list of items when the user reaches the end of the list.
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/[email protected]/include/keynav.js/+esm';
</script>
<bp-keynav loop layout="block">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</bp-keynav>