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
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 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?