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 PanelBar Component is part of Kendo UI for Vue, a professional grade UI library with 90+ 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 bindingYou can bind the PanelBar to local arrays of data or to remote data.
  • ItemsThe PanelBar items provide a number of configuration options for their titles, states, and custom properties.
  • Expand modesThe PanelBar supports the single and multiple expand modes.
  • State managementThe 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.
  • CustomizationThe PanelBar allows you to render collections, custom elements, and items with custom properties.
  • AnimationsThe PanelBar comes with built-in show and hide animations.
  • RoutingYou can use the PanelBar as a container for navigational components with any router library.
  • GlobalizationThe PanelBar has built-in globalization support.
  • Keyboard navigationThe Menu supports various keyboard shortcuts.
  • AccessibilityThe PanelBar is accessible by screen readers and provides full WAI-ARIA support.
  • EventsYou can tailor the behavior of the PanelBar by using the variety of generated events.

In this article

Not finding the help you need?