KendoReact PanelBar Overview

The KendoReact PanelBar displays hierarchical data as a multi-level, expandable component.

You can describe the children items by:


The following example demonstrates the PanelBar in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

The PanelBar is part of the KendoReact Layout component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the PanelBar and the rest of the components in the package, see the Getting Started with the KendoReact Layout Package guide.

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.

In this article

Not finding the help you need?