# Keyboard Navigation

## Managing the Focus

The navigation will be enabled by a `Navigable` parameter, like the Grid. When `Navigable` is true, all tiles will have a tabindex of `0`, and can be accessed through the reglar `Tab` key navigation.

## Keyboard Shortcuts

| Shortcut                      | Behavior                                                                                                                                        |
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `Tab`                         | Move focus to the next tile. If focus is on the last tile, focus the next focusable element on the page.                                        |
| `Shift + Tab`                 | Move focus to the previous tile. If focus is on the first tile, focus the previous focusable element before the TileLayout.                     |
| `Enter`                       | Focuses the first focusable element within the tile. Focus is trapped and wrapped within the tile content and follows its natural Tab sequence. |
| `Escape`                      | Moves focus back to the TileLayout item wrapper when it is on a focusable element within the tile content.                                      |
| `Shift + Right Arrow`         | Reorders the focused tile with the next one (if such exists).                                                                                   |
| `Shift + Left Arrow`          | Reorders the focused tile with the previous one (if such exists).                                                                               |
| `Ctrl/Cmd(Mac) + Right Arrow` | Increments the focused tile width with one column (to a maximum of the preset columns count).                                                   |
| `Ctrl/Cmd(Mac) + Left Arrow`  | Decrements the focused tile width with one column (to a minimum of 1).                                                                          |
| `Ctrl/Cmd(Mac) + Down Arrow`  | Increments the focused item height with one row (to a maximum of the preset rows count if such option exists).                                  |
| `Ctrl/Cmd(Mac) + Up Arrow`    | Decrements the focused item height with one row (to a minimum of 1).                                                                            |

> Prevent the default browser behavior when using the Cmd + ArrowKey shortcuts for macOS.

## See Also

* [Learn about KendoReact Free.](https://www.telerik.com/kendo-react-ui-develop/components/getting-started/free-vs-premium)

* [Accessibility in KendoReact](https://www.telerik.com/kendo-react-ui-develop/components/accessibility)

* [Accessibility Compliance and Keyboard Support in KendoReact](https://www.telerik.com/kendo-react-ui-develop/components/accessibility/accessibility-compliance)