Vue ExpansionPanel Overview
Updated on Sep 9, 2026
The Kendo UI for Vue ExpansionPanel component allows you to display all types of information in summary or in detail. The component has two types of states - expanded and collapsed. By changing these states, the user can switch between the summary or the detailed view of the component.
Start Free Trial
The following example demonstrates a basics ExpansionPanel configuration.
Loading ...
The ExpansionPanel is part of the Kendo UI for Vue Layout component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the ExpansionPanel and the rest of the components in the package, see the Getting Started with the Kendo UI for Vue Layout Package guide.
Key Features
- Animations—The expand and collapse actions of the ExpansionPanel can be animated.
- Icons—The ExpansionPanel enables you to customize its expand and collapse icon indicators.
- Disabled ExpansionPanel—You can use the configuration options of the ExpansionPanel to disable the whole group of buttons or a single button so that users are not able to interact with it.
- Accessibility—The ExpansionPanel is accessible for screen readers and supports WAI-ARIA attributes.
- Keyboard navigation—The ExpansionPanel supports a number of keyboard shortcuts for processing various commands.
Support and Learning Resources
- ExpansionPanel Homepage
- Getting Started with the Kendo UI Vue Layout
- API Reference of the ExpansionPanel Component
- Getting Started with Kendo UI for Vue - JavaScript (Online Guide)
- Getting Started with Kendo UI for Vue - TypeScript (Online Guide)
- Getting Started with Kendo UI for Vue - JavaScript + Options API (Online Guide)
- Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)
- Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)
- Virtual Classroom (Training Course for Registered Users)
- ExpansionPanel Forum
- Knowledge Base
- Kendo UI Productivity Tools extension for VS Code