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 100+ 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 bindingYou can bind the PanelBar to an array of PanelBarItemModel objects from a local or remote data source.
  • ItemsThe 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 modesThe PanelBar supports the single, multiple, and full expand modes.
  • TemplatesYou can apply templates to instantiate the PanelBar items and customize its styles.
  • AnimationsYou can control the expand and collapse animations of the PanelBar.
  • RoutingThe PanelBar can utilize the Angular Router in this way enabling you to use it as a navigational component.
  • GlobalizationAll Kendo UI for Angular Layout components provide globalization options.
  • AccessibilityThe PanelBar is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigationThe PanelBar supports a number of keyboard shortcuts for processing various commands.

In this article

Not finding the help you need?