# KendoReact Keyboard Navigation Overview

The KendoReact Keyboard Navigation functionality helps you to implement keyboard navigation in a React application.

<CtaPanelOverview></CtaPanelOverview>

With the KendoReact Keyboard Navigation, you no longer have to spend time thinking about events handling and managing the focus in your application.

## Implementing KendoReact Keyboard Navigation

To enable the basic navigation with the left and right arrow keys:

1. Wrap the elements that require keyboard navigation in an HTML element. This is the root element (navigation scope).
2. Add a ref and a `keydown` event handler to the root element.
3. To initialize the Keyboard Navigation component, pass to it an object with the following properties:

* `root`—The ref object of the root DOM element.
* `selectors`—An array of CSS selectors, from which the navigation elements will be queried from the root element (e.g. `root.querySelectorAll(selectors.join(','))`). Make sure their order matches the navigation elements order.
* `keyboardEvents`—Add a `keydown` object with `ArrowLeft` and `ArrowRight` handlers. The handlers' names match the `key` property of the [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values).
* `tabIndex`—The tabIndex that the Navigation will use.

1. Attach `keydown` event to the root element.

The code snippet below shows how to configure basic navigation with the left and right arrows for a set of button components.

```js
const navigation = React.useMemo(
    () => new Navigation({
        root,
        selectors: ['.k-button-group > button'],
        keyboardEvents: {
            keydown: {
                ArrowRight: (target, nav, ev) => {
                    // Prevent the arrow key from scrolling the page.
                    ev.preventDefault();
                    nav.focusNext(target);
                },
                ArrowLeft: (target, nav, ev) => {
                    ev.preventDefault();
                    nav.focusPrevious(target);
                }
            }
        },
        tabIndex: 0
    }), []
);
```

The following example demonstrates the above Keyboard Navigation configuration in action.

Use the `left` and `right` arrow keys to navigate.

[Demo Source](https://demos.telerik.com/kendo-react-ui/common/navigation/basic/source.txt)

## Using Keyboard Navigation in a List

The next example builds upon the basic configuration by adding the following:

* Handling the `Space` key allows you to expand and collapse the TreeList items.
* Scrolling to the viewport is added when the focused item is not visible.

Use the `up` and `down` arrow keys to navigate.

[Demo Source](https://demos.telerik.com/kendo-react-ui/common/navigation/list/source.txt)

## Using Keyboard Navigation in an HTML Table

To implement the Keyboard Navigation for an HTML table, use additional functions that define which DOM element in the table to focus on every subsequent user action.

Use the `up`, `down`, `left` and `right` arrow keys to navigate.

[Demo Source](https://demos.telerik.com/kendo-react-ui/common/navigation/grid/source.txt)

> The Keyboard Navigation is part of the [KendoReact Common Utilities](https://www.telerik.com/kendo-react-ui-develop/components/common) component library. The procedures for installing, importing, and using the Common Utilities are identical for all components in the package. To learn how to use the Keyboard Navigation and the rest of the Common Utilities, see the [`Getting Started with the KendoReact Common Utilities`](https://www.telerik.com/kendo-react-ui-develop/components/common) guide.

## Suggested Links

* [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui-develop/components/getting-started)
* [Getting Started with KendoReact Navigation](https://www.telerik.com/kendo-react-ui-develop/components/common/api/navigation)
* [KendoReact Navigation Options](https://www.telerik.com/kendo-react-ui-develop/components/common/api/navigationoptions)