Kendo UI for Vue

Vue PanelBar (Accordion)

  • Group your content by parent-child relationships in completely customizable and collapsible panes.
  • Part of Kendo UI for Vue library together with other best-in-class native components for building fast and beautiful apps.
  • Comes with outstanding technical support, detailed documentation and demos.
PanelBar
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • 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

    accessibility
kendo

Get Started with Kendo UI for Vue

Kendo UI