# 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`](https://www.telerik.com/kendo-angular-ui-develop/components/layout/api/panelbarcomponent#items) property.

<CtaPanelOverview></CtaPanelOverview>

The following example demonstrates the PanelBar in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/panelbar/basic_usage/source.txt)

## Key Features

* [Data binding](https://www.telerik.com/kendo-angular-ui-develop/components/layout/panelbar/data-binding)—You can bind the PanelBar to an array of `PanelBarItemModel` objects from a local or remote data source.
* [Items](https://www.telerik.com/kendo-angular-ui-develop/components/layout/panelbar/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](https://www.telerik.com/kendo-angular-ui-develop/components/layout/panelbar/expand-modes)—The PanelBar supports the single, multiple, and full expand modes.
* [Templates](https://www.telerik.com/kendo-angular-ui-develop/components/layout/panelbar/templates)—You can apply templates to instantiate the PanelBar items and customize its styles.
* [Animations](https://www.telerik.com/kendo-angular-ui-develop/components/layout/panelbar/animations)—You can control the expand and collapse animations of the PanelBar.
* [Routing](https://www.telerik.com/kendo-angular-ui-develop/components/layout/panelbar/routing)—The PanelBar can utilize the Angular Router in this way enabling you to use it as a navigational component.
* [Globalization](https://www.telerik.com/kendo-angular-ui-develop/components/layout/globalization)—All Kendo UI for Angular Layout components provide globalization options.
* [Accessibility](https://www.telerik.com/kendo-angular-ui-develop/components/layout/panelbar/accessibility)—The PanelBar is accessible for screen readers and supports WAI-ARIA attributes.
* [Keyboard navigation](https://www.telerik.com/kendo-angular-ui-develop/components/layout/panelbar/keyboard-navigation)—The PanelBar supports a number of keyboard shortcuts for processing various commands.

## Support and Learning Resources

* [PanelBar Homepage](https://www.telerik.com/kendo-angular-ui/panelbar)
* [Getting Started with the Kendo UI for Angular Layout](https://www.telerik.com/kendo-angular-ui-develop/components/layout/installation/getting-started)
* [API Reference of the PanelBar](https://www.telerik.com/kendo-angular-ui-develop/components/layout/api/panelbarcomponent)
* [API Reference of the PanelBarItem](https://www.telerik.com/kendo-angular-ui-develop/components/layout/api/panelbaritemcomponent)
* [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started)
* [Getting Started with Kendo UI for Angular (Video Tutorial)](https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial)
* [Video Courses](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started/video-onboarding)
* [PanelBar Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=1101)
* [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular)
* [Knowledge Base](https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base)

## Additional Resources

* [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
* [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui)
* [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)