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.
Bind your PanelBar to a remote or local data source to automatically populate the content. You can also build each panel individually.
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.
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.
The Vue PanelBar includes built=in animations that make expanding/collapsing an engaging user experience.
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.
The Vue PanelBar supports navigation and interaction of the component using the keyboard. This is part of our ongoing commitment to UX and 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.