---
title: Overview
position: 1
seo_title: Overview of the PanelBar Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  PanelBar component and its types, check out the extensive set of available
  options in its live demo, and change its appearance by setting the variant of
  the component.
---
## 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. The PanelBar is especially useful in administrative dashboards, FAQs, or settings menus.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/panelbar/overview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/panelbar/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/layout/panelbar/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/layout/panelbar/"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/panelbar"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/panelbar"}],"demo":"components/panelbar/overview"}'></LiveDemo>

### 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 PanelBar and includes the following elements:

<BlueprintImage data='{"description":"","labels":[{"text":"Root item (selected)"},{"text":"Child item"},{"text":"Child item (expanded)"},{"text":"Child item group"},{"text":"Item label"},{"text":"Collapse/Expand icon"}]}'>![A Telerik and Kendo UI PanelBar component](images/components-panelbar-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI PanelBar component")</BlueprintImage>

#### Variants

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

* Expandable
* Non-expandable

<BlueprintImage data='{"description":"","labels":[{"text":"Expandable PanelBar item"},{"text":"Non-expandable PanelBar item"}]}'>![A Telerik and Kendo UI PanelBar component item variants](images/components-panelbar-overview-expand-collapse-item.png "Variants of a Telerik and Kendo UI PanelBar component item")</BlueprintImage>

### Framework-Specific Documentation

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

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular PanelBar","description":"Find more information about the Kendo UI for Angular PanelBar in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor PanelBar","description":"Find more information about the Telerik UI for Blazor PanelBar in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/panelbar/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery PanelBar","description":"Find more information about the Kendo UI for jQuery PanelBar in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/panelbar/overview"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact PanelBar","description":"Find more information about the KendoReact PanelBar in the official product documentation of the component.","url":"https://www.telerik.com/kendo-react-ui/components/layout/panelbar/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue PanelBar","description":"Find more information about the Kendo UI for Vue PanelBar in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/layout/panelbar/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core PanelBar","description":"Find more information about the Telerik UI for ASP.NET Core PanelBar component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/navigation/panelbar/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC PanelBar","description":"Find more information about the Telerik UI for ASP.NET MVC PanelBar component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/navigation/panelbar/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>
</Wrap>