Vue Dropdown Tree - Display hierarchical data in a tree-like structure
- Easily present a selection list of hierarchical data in a tree-like structure.
- Use built-in features like data binding, load on demand (lazy loading), multiselection, checkboxes, and more.
- Customize the selection pop-up and tree items with different template options.
Trusted by the world’s leading companies
Overview
The Dropdown Tree control is a text-box control that allows users to select a single value or multiple values from hierarchical data in a tree-like structure. It has several out-of-the-box features, such as data binding, checkboxes, templates, UI customization, accessibility, and preselected values.
Data binding
Bind data to the Dropdown Tree control from different data sources. Data can be local or in any remote service and fetched using different kinds of adapters like OData, OData V4, URL, JSON, and web API.
Render modes
The Dropdown Tree component has different render modes to visualize selected items.
Box mode
The selected items are displayed as a chip (box) in the Dropdown Tree input box.
Delimiter mode
The selected items are displayed with the delimiter character in the Dropdown Tree input box.
Default mode
The default mode is a combination of both the box and delimiter modes. When the control is in focus, selected items will be displayed as chips similar to the box mode. Otherwise, they will be displayed with a delimiter character as in the delimiter mode.
Template mode
The selected items are displayed with the given custom template value instead of the selected item text in the Dropdown Tree input box.
Checkboxes
The Vue Dropdown Tree control provides built-in support for checkboxes, allowing users to select more than one item. Enabling the checkboxes and autocheck functionality makes the parent and child items dependent on each other. This control also provides aSelect All option in the pop-up.
Multiple selection
The Dropdown Tree control allows users to select more than one item in the pop-up using the multiselection functionality.
UI customization with templates
Use templates to change the appearance of the selection pop-up for tree items, plus the header and footer of the pop-up tree.
Header template
Design your own header for the pop-up tree using the header template.
Item template
Define the custom appearance of each tree item using the item template.
Footer template
Design your own custom footer for the pop-up tree using the footer template.
Built-in and customizable themes
Several built-in, Sass-based themes are available: Fluent, Tailwind CSS, Bootstrap 5, Bootstrap, Material, and high contrast. Users can customize these themes by either overriding the existing Sass styles or creating custom themes using the Theme Studio application.
Web accessibility
- Fully supportsWAI-ARIA accessibility to make the Dropdown Tree accessible to screen readers and assistive devices.
- FollowsWAI-ARIA best practices for implementing keyboard interaction.
- UsesWCAG 2.0-based design for UI visual elements such as foreground color, background color, line spacing, text, and images.
- Supports right-to-left (RTL) direction for users working with RTL languages like Hebrew and Arabic.
Developer-friendly APIs
Developers can customize all UI elements and control their behaviors according to the end user’s requirements through the component’s rich set of client-side APIs.
Other supported frameworks
The Dropdown Tree component is also available in React, Angular, and JavaScript frameworks. Check out the different Dropdown Tree platforms from the links below:
145+ VUE UI COMPONENTS
Our Customers Love Us
See Real Success Stories
Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.
Explore Case StudiesIndustry
Software development
75% Cost reduction
50% Faster development
Industry
Utilities (oil and gas)
450+ hours saved
Streamlined processes and hours of development effort saved.
Advanced, flexible features
Empowered users through robust and versatile functionality.
Industry
Software and technology
1000+ of hours saved
Accelerated development with enterprise-ready UI components.
Efficient file management
Streamlined workflows with document libraries without building them from scratch.
Industry
Software and technology
2 Years of delay avoided
Two years of delays prevented with proactive planning.
On-time delivery
Projects delivered on schedule using trusted controls.
Industry
IT services and IT consulting
Improved performance
Large datasets handled with easy customization and quick debugging.
Highly customizable
Plug-and-play controls with quick template integration.
Industry
Professional services
Instant access
Quick availability of features and resources.
Reduced dependencies
Fewer dependencies for faster development.
Rated by users across the globe
Transform your applications today by downloading our free evaluation version Download Free TrialNo credit card required.
Documentation
Awards
Greatness—it’s one thing to say you have it, but it means more when others recognize it.Syncfusion® is proud to hold the following industry awards.
