Kendo UI for Vue
Vue PanelBar (Accordion)
- Group your content by parent-child relationships in completely customizable and collapsible panes.
- Part of the Kendo UI for Vue library along with 100+ professionally-designed components.
- Includes support, documentation, demos, virtual classrooms, learning resources and more!
-
Overview
The Vue PanelBar, also known as the Angular Accordion, showcases hierarchical or multi-level content in collapsible panes, or panels. The PanelBar provides many configuration options to help with customization and integrates with Vue routing to facilitate further navigation. It is typically used as a layout tool but is also useful for side navigation.
-
Data Binding
Bind your PanelBar to a remote or local data source to automatically populate the content. You can also build each panel individually.
-
Controlled and Uncontrolled Modes
Use Controlled Mode to configure the expanded/collapsed state of each item on load and how they changed based on application state. In uncontrolled mode, all interactions are initiated by the user.
-
Expand Modes
The Vue PanelBar includes two expand behaviors: single and multiple expansion. Single expansion allows users to expand just one item at a time. Multiple expansion allows users to expand any and all items within the component simultaneously.
-
Animations
The Vue PanelBar includes built=in animations that make expanding/collapsing an engaging user experience.
-
Routing
Since the Vue PanelBar works well for navigation, integration with Vue router is critical. By default, every item within the compoinent has configuration options to facilitate a smooth integration of the items with Vue router.
-
Keyboard Navigation
The Vue PanelBar supports navigation and interaction of the component using the keyboard. This is part of our ongoing commitment to UX and accessibility.
-
Accessibility
All components included in Kendo UI for Vue provide full WAI-ARIA support, compliance with Section 508 requirements, and is AAA rated with WCAG 2.0.
Get Started with Kendo UI for Vue
