PanelBar

PanelBar Overview

The PanelBar component is a versatile user interface element used to present multiple panels of content in an accordion-style layout. Each panel can be expanded or collapsed, allowing users to control the visibility of the content according to their needs. This component is ideal for organizing complex information into digestible sections without overwhelming the user, making it especially useful in administrative dashboards, FAQs, or settings menus.

Live Demo

Appearance

PanelBars provide built-in styling options that grant visually appealing and flexible rendering experience. 

Apart from the default vision of the Telerik and Kendo UI PanelBar, the component supports alternative styling options that enable you to configure the individual aspects of its appearance.

Anatomy

The next image shows the anatomy of a PanelBarand includes the following elements:

1. Root item - Selected
2. Child item
3. Child item - Expanded
4. Child item group
5. Item label
6. Collapse/ Expand icon

Variants

Depending on the behavior, the Telerik and Kendo UI PanelBar item can be any of the following types:

• Expandable
• Non-expandable

1. Expandable Panelbar item
2. Non-expandable PanelBar item

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular PanelBarFind more information about the Kendo UI for Angular PanelBar in the official product documentation of the component.

Telerik UI for Blazor PanelBarFind more information about the Telerik UI for Blazor PanelBar in the official product documentation of the component.

Kendo UI for jQuery PanelBarFind more information about the Kendo UI for jQuery PanelBar in the official product documentation of the component.

KendoReact PanelBarFind more information about the KendoReact PanelBar in the official product documentation of the component.

Kendo UI for Vue PanelBarFind more information about the Kendo UI for Vue PanelBar in the official product documentation of the component.

Telerik UI for ASP.NET Core PanelBarFind more information about the Telerik UI for ASP.NET Core PanelBar component.

Telerik UI for ASP.NET MVC PanelBarFind more information about the Telerik UI for ASP.NET MVC PanelBar component.