Core Quick Start Guide

This section provides an overview of Quick Start Guide for Arrow Navigation Core library.

For a quick start, follow the steps below to get started with Arrow Navigation Core library.

Remember:

If you are using React for your project, please refer to the Quick Start Guide for Arrow Navigation React library. The react library provides a set of components and hooks to implement spatial navigation in your web app easily.

Before You Begin

Before you start using Arrow Navigation Core library, make sure to install the library in your project. You can install the library using a package manager or include the library script directly in your HTML file using a CDN link. For more information, refer to the Installation Guide.

Getting Started

To get started with Arrow Navigation Core library, follow these steps:

1

Initialize

Initialize Arrow Navigation Core library in your project by calling the initArrowNavigation function. This function initializes the library and sets up the necessary configurations. This function must be called at the beginning of your application.

import { initArrowNavigation } from "@arrow-navigation/core"

initArrowNavigation({ debug: true })
2

Get the API instance

Get the Arrow Navigation API instance. This function returns the Arrow Navigation API instance, which you can use to control the navigation behavior. You can access the Arrow Navigation API instance from any part of your application.

import { getArrowNavigation } from '@arrow-navigation/core'

const navigationApi = getArrowNavigation()
3

Register a group of elements

Let's use a simple html structure to demonstrate how to register a group of elements for navigation, for styling we will use TailwindCSS. In this example, we have a list of items that we want to navigate using arrow keys.

<div id="group-0" class="flex gap-2 p-8 border rounded-lg">
  <button
    id="item-0-0"
    class="w-16 h-16 bg-teal-500 focus:bg-teal-600"
  ></button>
  <button
    id="item-0-1"
    class="w-16 h-16 bg-teal-500 focus:bg-teal-600"
  ></button>
  <button
    id="item-0-2"
    class="w-16 h-16 bg-teal-500 focus:bg-teal-600"
  ></button>
</div>

To register the group of elements, you need to call the registerGroup function and pass the container id as an argument.

navigationApi.registerGroup('group-0')
4

Register group elements

To register the elements inside the group, you need to call the registerElement function and pass the element id and the group id as arguments.

navigationApi.registerElement('item-0-0', 'group-0')
navigationApi.registerElement('item-0-1', 'group-0')
navigationApi.registerElement('item-0-2', 'group-0')
5

Navigate between elements

Now you can navigate between the elements using the arrow keys. The focus will move to the next or previous element based on the arrow key pressed, focusing on the nearest element in the direction of the arrow key. In the example below, you can see how the focus moves between the buttons and groups.