Kendo UI for Vue Native PanelBar Overview

The Kendo UI for Vue Native PanelBar displays hierarchical data as a multi-level, expandable component.

You can describe the children items of the PanelBar by Binding a data collection to the items property of the component.

Basic Usage

The following example demonstrates the PanelBar in action.

Example

View Source

Change Theme:

Data binding—You can bind the PanelBar to local arrays of data or to remote data.
Items—The PanelBar items provide a number of configuration options for their titles, states, and custom properties.
Expand modes—The PanelBar supports the single and multiple expand modes.
State management—The PanelBar allows you to set an initial selection, expansion, or focus state to the PanelBarItem and override the selection every time a PanelBarItem is selected.
Customization—The PanelBar allows you to render collections, custom elements, and items with custom properties.
Animations—The PanelBar comes with built-in show and hide animations.
Routing—You can use the PanelBar as a container for navigational components with any router library.
Globalization—The PanelBar has built-in globalization support.
Keyboard navigation—The Menu supports various keyboard shortcuts.
Accessibility—The PanelBar is accessible by screen readers and provides full WAI-ARIA support.
Events—You can tailor the behavior of the PanelBar by using the variety of generated events.