Kendo UI for Angular PanelBar Overview

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

To describe its items children, the PanelBar enables you to nest them as PanelBarItem components or to set the items property.

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

The following example demonstrates the PanelBar in action.

View Source
Change Theme:

Key Features

  • Data binding—You can bind the PanelBar to an array of PanelBarItemModel objects from a local or remote data source.
  • Items—The PanelBar provides a number of configuration options for its items such as setting their titles and disabled state, rendering icons and images next to them, and more.
  • Expand modes—The PanelBar supports the single, multiple, and full expand modes.
  • Templates—You can apply templates to instantiate the PanelBar items and customize its styles.
  • Animations—You can control the expand and collapse animations of the PanelBar.
  • Routing—The PanelBar can utilize the Angular Router in this way enabling you to use it as a navigational component.
  • Globalization—All Kendo UI for Angular Layout components provide globalization options.
  • Accessibility—The PanelBar is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigation—The PanelBar supports a number of keyboard shortcuts for processing various commands.

Support and Learning Resources

Additional Resources