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.

    See the Vue PanelBar demo

    PanelBar - Overview
  • Data Binding

    Bind your PanelBar to a remote or local data source to automatically populate the content. You can also build each panel individually.

    See the Vue PanelBar DataBinding demo

    Data 0Binding
  • 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.

    See the Vue PanelBar Controlled Mode demo

  • 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.

    See the Vue PanelBar Expand Modes demo

    PanelBar - Expanded Modes 1
  • Animations

    The Vue PanelBar includes built=in animations that make expanding/collapsing an engaging user experience.

    See the Vue PanelBar Animations demo

    PanelBar - Animation
  • 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.

    See the Vue PanelBar Routing demo

  • 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.

    See the Vue PanelBar Keyboard Navigation demo

    Keyboard Navigation
  • 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.

    Read the Vue PanelBar Accessibility documentation

Next Steps

Get Started with Kendo UI for Vue

Kendo UI for Vue - Kendoka