Toggleable menu for displaying lists of links and actions.


This component requires the <client-only></client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).

Basic usage

Hover on the dropdown menu to unfold it for more actions.

Triggering element

Use the button to trigger the dropdown list.

How to trigger

Click the triggering element or hover on it.

Use hide-on-click to define if menu closes on clicking.

Command event

Clicking each dropdown item fires an event whose parameter is assigned by each item.

You can open or close the dropdown menu by manually use handleOpen or handleClose


Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.

NameDescriptionTypeAccepted ValuesDefault
typemenu button type, refer to Button Component, only works when split-button is truestring
sizemenu size, also works on the split buttonstringlarge / default / smalldefault
max-heightthe max height of menustring / number
split-buttonwhether a button group is displayedbooleanfalse
disabledWhether to disablebooleanfalse
placementplacement of pop menustringtop/top-start/top-end/bottom/bottom-start/bottom-endbottom
triggerhow to triggerstringhover/click/contextmenuhover
hide-on-clickwhether to hide menu after clicking menu-itembooleantrue
show-timeoutDelay time before show a dropdown (only works when trigger is hover)number150
hide-timeoutDelay time before hide a dropdown (only works when trigger is hover)number150
roleThe ARIA role attribute for the dropdown menu. Depending on the use case, you may want to change this to 'navigation'string'menu'
tabindextabindex of Dropdownnumber0
popper-classcustom class name for Dropdown's dropdownstring
popper-optionspopper.js parametersObjectrefer to popper.js doc{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}
teleported 2.2.20whether the dropdown popup is teleported to the bodybooleantrue
content of Dropdown. Notice: Must be a valid html dom element (ex. <span>, <button> etc.) or el-component, to attach the trigger listener
dropdowncontent of the Dropdown Menu, usually a <el-dropdown-menu> elementDropdown-Menu
clickif split-button is true, triggers when left button is clicked
commandtriggers when a dropdown item is clickedthe command dispatched from the dropdown item
visible-changetriggers when the dropdown appears/disappearstrue when it appears, and false otherwise
handleOpenopen the dropdown menu
handleCloseclose the dropdown menu
content of Dropdown MenuDropdown-Item
NameDescriptionTypeAccepted ValuesDefault
commanda command to be dispatched to Dropdown's command callbackstring/number/object
disabledwhether the item is disabledbooleanfalse
dividedwhether a divider is displayedbooleanfalse
iconcustom iconstring | Component
customize of Dropdown Item