---
title: Keyboard Navigation
page_title: Keyboard Navigation - DropDownTree - Kendo UI for Vue
description: "Explore the keyboard navigation options provided by the Kendo UI DropDownTree wrapper for Vue."
slug: keyboard_navigation_dropdowntree_wrapper
canonicalLink: "https://www.telerik.com/kendo-vue-ui/components/dropdowns/dropdowntree/keyboard-navigation/"
position: 5
---

<div><WrapperBanner link="/kendo-vue-ui/components/dropdowns/dropdowntree/keyboard-navigation"></WrapperBanner></div>

# Keyboard Navigation

The keyboard support of the DropDownTree is always available.

The DropDownTree supports the following keyboard shortcuts:

| SHORTCUT  | DESCRIPTION |
|:---       |:--- |
| `Access Key`+`w` | Focuses the DropDownTree.|

When the popup is closed, the DropDownTree supports the following keyboard shortcuts:

| SHORTCUT        |  DESCRIPTION |
|:---             |:---  |
|`Right Arrow`    | Highlights the next selected item. |
|`Left Arrow`     | Highlights the previously selected item. |
|`Home`           | Highlights the first selected item. |
|`End`            | Highlights the last selected item. |
|`Delete`         | Deletes the highlighted item. |
|`Backspace`      | Deletes the highlighted item or the last item. |
|`Alt`+`Down Arrow` | Opens the popup. |
|`Esc`            | Clears all items. |

When the popup is opened, the DropDownTree supports the following keyboard shortcuts:

| SHORTCUT        |  DESCRIPTION |
|:---             |:---  |
|`Down Arrow`     | Highlights the next item. |
|`Up Arrow`       | Highlights the previous item. |
|`Home`           | Highlights the first item in the popup. |
|`End`            | Highlights the last item in the popup. |
|`Alt`+`Up Arrow` | Closes the popup. |
|`Esc`            | Closes the popup. |

The DropDownTree supports the following keyboard shortcuts for navigation:

| SHORTCUT        |  DESCRIPTION |
|:---             |:---  |
|`Down Arrow`     | Highlights the next item. |
|`Up Arrow`       | Highlights the previous item. |
|`Left Arrow `    | Collapses the item. |
|`Right Arrow`    | Expands the item. |
|`Home`           | Highlights the first item in the list. |
|`End`            | Highlights the last item in the list. |
|`Enter`          | Selects the highlighted item when the DropDownTree does not render checkboxes. |
|`Space`          | Checks the highlighted item when the DropDownTree renders checkboxes. |

{% meta height:750 %}
{% embed_file keyboard-navigation/main.vue preview %}
{% embed_file keyboard-navigation/main.js %}
{% endmeta %}

## Suggested Links

* [Kendo UI DropDownTree for jQuery](https://docs.telerik.com/kendo-ui/controls/editors/dropdowntree/overview)
* [API Reference of the DropDownTree Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdowntree)