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>