# Vue DropDownTree Overview

The Kendo UI for Vue DropDownTree is a form component that lets you choose a single predefined value from a hierarchical list and is a richer version of the `<select>` element. Supports filtering, custom rendering, keyboard navigation, expand and collapse of the hierarchical data items.

The Kendo UI for Vue DropDownTree component is part of the Kendo UI for Vue library of Vue UI components. It is distributed through NPM under the [kendo-vue-dropdowns package](https://www.npmjs.com/package/@progress/kendo-vue-dropdowns).

<CtaPanelOverview></CtaPanelOverview>

The following example shows how to set up the DropDownTree component:

1. Set [`dataItems`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdowntreeprops#dataitems), [`textField`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdowntreeprops#textfield) and [`dataItemKey`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdowntreeprops#dataitemkey) prop.
2. Set [`value`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdowntreeprops#value), [`selectField`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdowntreeprops#selectfield) and handle [`onChange`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdowntreeprops#onchange) event.
3. Set [`expandField`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdowntreeprops#expandfield) and handle [`onExpandchange`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdowntreeprops#onexpandchange) event.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/dropdowntree/overview/source.txt)

> The DropDownTree is part of the [Kendo UI for Vue Dropdowns](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns) component library. The procedures for installing, importing, and using the Dropdowns are identical for all components in the package.

## Key Features

* [Filtering](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdowntree/filtering)—You can configure the DropDownTree to filter the results locally or on the server.
* [Custom rendering](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdowntree/custom-rendering)—You can customize the way the DropDownTree component renders its elements.
* [Forms support](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdowntree/forms)—You can use the Vue DropDownTree component with HTML form elements or with [the Kendo UI for Vue Form component](https://www.telerik.com/kendo-vue-ui-develop/components/form).
* [Keyboard navigation](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdowntree/keyboard-navigation)—The DropDownTree supports various keyboard shortcuts.
* [Accessibility](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdowntree/accessibility/wai-aria-support)—The DropDownTree is accessible for screen readers and supports WAI-ARIA attributes.

## Suggested Links

* [API Reference of the DropDownTree](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdowntreeprops)
* [Vue DropDownTree High-Level Overview](https://www.telerik.com/kendo-vue-ui/dropdowntree)