El Dropdown

Dropdown Component

Dropdown component provides a toggleable menu for displaying lists of links and actions.

When to Use

• Navigation menus
• Action menus
• Context menus
• Split button actions

Basic Usage

  
    
      Dropdown List
      
    
    
      
        Action 1
        Action 2
        Action 3
      
    
  

import { ArrowDown } from '@element-plus/icons-vue'

Triggering Element

  
    Dropdown List
    
      
        Action 1
        Action 2
      
    
  

Trigger Methods

  
    Click to trigger
    
      
        Action
      
    
  
  
  
    Hover to trigger
    
      
        Action
      
    
  

Command Event

  
    Dropdown
    
      
        Action 1
        Action 2
      
    
  

const handleCommand = (command) => {
  console.log('Command:', command)
}

Sizes

  
    Large
    
      
        Action
      
    
  

API Reference

Dropdown Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | type | Menu button type | Button type enum | '' | | size | Menu size | 'large' \| 'default' \| 'small' | '' | | max-height | Max height of menu | string \| number | '' | | split-button | Display as button group | boolean | false | | disabled | Whether disabled | boolean | false | | placement | Placement of pop menu | Placement enum | 'bottom' | | effect | Tooltip theme | 'dark' \| 'light' | 'light' | | trigger | How to trigger | 'click' \| 'hover' \| 'contextmenu' | 'hover' | | hide-on-click | Hide menu after clicking | boolean | true | | show-timeout | Delay before show | number | 150 | | hide-timeout | Delay before hide | number | 150 | | teleported | Teleport to body | boolean | true |

Dropdown Events

| Name | Description | Type | |------|-------------|------| | click | Left button clicked (split-button) | (e: MouseEvent) => void | | command | Dropdown item clicked | (...args: any[]) => void | | visible-change | Dropdown visibility changes | (val: boolean) => void |

Dropdown Exposes

| Name | Description | Type | |------|-------------|------| | handleOpen | Open dropdown menu | () => void | | handleClose | Close dropdown menu | () => void |

DropdownItem Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | command | Command to dispatch | string \| number \| object | — | | disabled | Whether disabled | boolean | false | | divided | Show divider | boolean | false | | icon | Custom icon | string \| Component | — |

Best Practices

1. Use split-button for primary action with dropdown
2. Use command event for action handling
3. Set hide-on-click="false" for multi-action menus

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.