---
title: Overview
page_title: PanelBar Overview - Components - Kendo UI for Vue
description: "Get an overview of the features the Kendo UI PanelBar wrapper for Vue delivers and use the component in Vue projects."
slug: overview_panelbar_wrapper
canonicalLink: "https://www.telerik.com/kendo-vue-ui/components/layout/panelbar/"
position: 1
---

<div><WrapperBanner link="/kendo-vue-ui/components/layout/panelbar"></WrapperBanner></div>    

# PanelBar Overview

The PanelBar displays hierarchical data in a multi-level, expandable format.

The PanelBar wrapper for Vue is a client-side wrapper for the [Kendo UI PanelBar](https://demos.telerik.com/kendo-ui/panelbar/index) widget.

<div data-component="StartFreeTrialSection"></div>

## Basic Usage

The following example demonstrates the PanelBar in action.

{% meta height:400 %}
{% embed_file panelbar/basic/main.vue preview %}
{% embed_file panelbar/basic/main.js %}
{% endmeta %}

## Functionality and Features

* [Setting the DataSource]({% slug data_source_settings_panelbar_wrapper %})
* [Data binding]({% slug databinding_panelbar_wrapper %})
* [Animation effects]({% slug animation_effects_panelbar_wrapper %})
* [Icons]({% slug icons_panelbar_wrapper %})
* [Templates]({% slug templates_panelbar_wrapper %})
* [Loading content with AJAX]({% slug loading_content_ajax_panelbar_wrapper %})
* [Keyboard navigation]({% slug keyboard_navigation_panelbar_wrapper %})
* [RTL support]({% slug rtl_support_panelbar_wrapper %})

## Events

The following example demonstrates basic PanelBar events. You can subscribe to [all PanelBar events](https://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar#events) by the handler name.

{% meta height:400 %}
{% embed_file panelbar/events/main.vue preview %}
{% embed_file panelbar/events/main.js %}
{% endmeta %}

## Suggested Links

* [Kendo UI PanelBar for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/panelbar/overview)
* [API Reference of the PanelBar Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar)