Dropdown

Toggleable menu for displaying lists of links and actions.

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.

Sizes

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

AttributeDescriptionTypeAccepted ValuesDefault
typemenu button type, refer to Button Component, only works when split-button is truestring
sizemenu size, also works on the split buttonstringmedium / small / mini
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)number250
hide-timeoutDelay time before hide a dropdown (only works when trigger is hover)number150
tabindextabindex of Dropdownnumber0
NameDescriptionSubtags
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
Event NameDescriptionParameters
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
NameDescriptionSubtags
content of Dropdown MenuDropdown-Item
AttributeDescriptionTypeAccepted ValuesDefault
commanda command to be dispatched to Dropdown's command callbackstring/number/object
disabledwhether the item is disabledbooleanfalse
dividedwhether a divider is displayedbooleanfalse
iconicon class namestring
NameDescription
customize of Dropdown Item