el-dropdown

Name: el-dropdown
Availability: InStock
Author: jiaiyan

Create reusable Element Plus dropdown menus with configurable triggers and placements.

21|2|Updated Mar 13, 2026

Search Tags:#vue #interaction #menu #dropdown #element-plus #ui-component #el-dropdown

Ready to run

npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-dropdown

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: el-dropdown
Source: https://github.com/jiaiyan/element-plus-skills/tree/main/components/el-dropdown
Command: npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-dropdown

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Dropdown menus are essential for organizing actions and navigation in complex UIs, but implementing consistent, accessible, and customizable menus across an app can be time-consuming and error-prone.

Core Features & Use Cases

Flexible dropdowns for navigation, actions, and context menus with configurable triggers, placements, and item commands.
Supports split-button variants, disabled states, and controlled visibility.
Use Case: Build a toolbar with actions or a settings menu in a dashboard.

Quick Start

Instantiate an el-dropdown in your template and configure the dropdown menu with el-dropdown-item entries.

Frequently Asked Questions about el-dropdown

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a dropdown menu in a Vue application using Element Plus?▼

To create a dropdown menu in a Vue application using Element Plus, instantiate the component in your template and configure the menu with el-dropdown-item entries. This provides a reusable dropdown menu for dashboards, forms, and other common UI scenarios.

Can I use a split-button or disable specific items in an Element Plus dropdown menu?▼

Yes, Element Plus dropdown menus support split-button variants and disabled states. You can configure these attributes directly on the component to control item interactivity and create distinct action buttons within the menu.

What configurable triggers and placements are available for Element Plus context menus?▼

Element Plus context menus support configurable triggers and placements. You can set attributes like trigger, placement, show-timeout, and hide-timeout to control how and where the dropdown menu appears based on user interaction.

How do I handle click events and item commands in a Vue dropdown menu component?▼

To handle click events and item commands in a Vue dropdown menu component, use the exposed events like click, command, and visible-change. The command event specifically captures the value assigned to each el-dropdown-item.

Does the Element Plus dropdown menu support controlled visibility and max-height constraints?▼

Yes, the Element Plus dropdown menu supports controlled visibility and max-height constraints. You can use the max-height attribute to limit menu length and call exposed methods like handleOpen and handleClose to manage visibility programmatically.