KendoReact Keyboard Navigation Overview
The KendoReact Keyboard Navigation functionality helps you to implement keyboard navigation in a React application.
Start Free TrialWith the KendoReact Keyboard Navigation, you no longer have to spend time thinking about events handling and managing the focus in your application.
Setting Up the React Keyboard Navigation
To enable the basic navigation with the left and right arrow keys:
- Wrap the elements that require keyboard navigation in an HTML element. This is the root element (navigation scope).
- Add a ref and a
keydown
event handler to the root element. - To initialize the Keyboard Navigation, 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 akeydown
object withArrowLeft
andArrowRight
handlers. The handlers' names match thekey
property of the KeyboardEvent.tabIndex
—The tabIndex that the Navigation will use.
- 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.
const navigation = React.useMemo(
() => new Navigation({
root,
selectors: ['.k-button-group > button'],
keyboardEvents: {
keydown: {
ArrowRight: (target, nav, ev) => {
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.
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.
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.
The Keyboard Navigation is part of the KendoReact Common Utilities 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
guide.