Dropdown
Toggleable menu for displaying lists of links and actions.
TIP
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.
Menu hiding behavior
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.
Dropdown methods
You can open or close the dropdown menu by manually use handleOpen
or handleClose
Sizes
Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.
Dropdown API
Dropdown Attributes
Name | Description | Type | Default |
---|---|---|---|
type | menu button type, refer to Button Component, only works when split-button is true | enum | '' |
size | menu size, also works on the split button | enum | '' |
max-height | the max height of menu | string / number | '' |
split-button | whether a button group is displayed | boolean | false |
disabled | whether to disable | boolean | false |
placement | placement of pop menu | enum | bottom |
trigger | how to trigger | enum | hover |
hide-on-click | whether to hide menu after clicking menu-item | boolean | true |
show-timeout | delay time before show a dropdown (only works when trigger is hover ) | number | 150 |
hide-timeout | delay time before hide a dropdown (only works when trigger is hover ) | number | 150 |
role | the ARIA role attribute for the dropdown menu. Depending on the use case, you may want to change this to 'navigation' | string | menu |
tabindex | tabindex of Dropdown | number / string | 0 |
popper-class | custom class name for Dropdown's dropdown | string | '' |
popper-options | popper.js parameters | object | {modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]} |
teleported 2.2.20 | whether the dropdown popup is teleported to the body | boolean | true |
Dropdown Slots
Name | Description | Subtags |
---|---|---|
default | content of Dropdown. Notice: Must be a valid html dom element (ex. <span>, <button> etc. ) or el-component , to attach the trigger listener | — |
dropdown | content of the Dropdown Menu, usually a <el-dropdown-menu> element | Dropdown-Menu |
Dropdown Events
Name | Description | Type |
---|---|---|
click | if split-button is true , triggers when left button is clicked | Function |
command | triggers when a dropdown item is clicked, the parameters is the command dispatched from the dropdown item | Function |
visible-change | triggers when the dropdown appears/disappears, the param is true when it appears, and false otherwise | Function |
Dropdown Exposes
Method | Description | Type |
---|---|---|
handleOpen | open the dropdown menu | Function |
handleClose | close the dropdown menu | Function |
Dropdown-Menu API
Dropdown-Menu Slots
Name | Description | Subtags |
---|---|---|
default | content of Dropdown Menu | Dropdown-Item |
Dropdown-Item API
Dropdown-Item Attributes
Name | Description | Type | Default |
---|---|---|---|
command | a command to be dispatched to Dropdown's command callback | string / number / object | — |
disabled | whether the item is disabled | boolean | false |
divided | whether a divider is displayed | boolean | false |
icon | custom icon | string / Component | — |
Dropdown-Item Slots
Name | Description |
---|---|
default | customize of Dropdown Item |