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.

The Layout Package is part of Kendo UI for Vue, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Basic Usage

The following example demonstrates the PanelBar in action.

View Source
Change Theme:

Key Features

  • 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.

Support and Learning Resources

Additional Resources