Menu
Element Plus Menu (菜单) component (el-menu) API documentation. Triggers when user wants to use, implement, or asks about el-menu or Menu component.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | element-plus-menu |
| description | Element Plus Menu (菜单) component (el-menu) API documentation. Triggers when user wants to use, implement, or asks about el-menu or Menu component. |
| Name | Description | Type | Default |
|---|---|---|---|
| mode | menu display mode | ^[enum]'horizontal' | 'vertical' | vertical |
| collapse | whether the menu is collapsed (available only in vertical mode) | ^[boolean] | false |
| ellipsis | whether the menu is ellipsis (available only in horizontal mode) | ^[boolean] | true |
| ellipsis-icon ^(2.4.4) | custom ellipsis icon (available only in horizontal mode and ellipsis is true) | ^[string] / ^[Component] | — |
| popper-offset ^(2.4.4) | offset of the popper (effective for all submenus) | ^[number] | 6 |
| default-active | index of active menu on page load | ^[string] | '' |
| default-openeds | array that contains indexes of currently active sub-menus | ^[array]string[] | [] |
| unique-opened | whether only one sub-menu can be active | ^[boolean] | false |
| menu-trigger | how sub-menus are triggered, only works when mode is 'horizontal' | ^[enum]'hover' | 'click' | hover |
| router | whether vue-router mode is activated. If true, index will be used as 'path' to activate the route action. Use with default-active to set the active item on load. | ^[boolean] | false |
| collapse-transition | whether to enable the collapse transition | ^[boolean] | true |
| popper-effect ^(2.2.26) | Tooltip theme, built-in theme: dark / light when menu is collapsed | ^[enum]'dark' | 'light' / ^[string] | dark |
| close-on-click-outside ^(2.4.4) | optional, whether menu is collapsed when clicking outside | ^[boolean] | false |
| popper-class ^(2.5.0) | custom class name for all popup menus and titles' tooltips | ^[string] | — |
| popper-style ^(2.11.5) | custom style for all popup menus and titles' tooltips | ^[string] / ^[object] | — |
| show-timeout ^(2.5.0) | control timeout for all menus before showing | ^[number] | 300 |
| hide-timeout ^(2.5.0) | control timeout for all menus before hiding | ^[number] | 300 |
| background-color ^(deprecated) | background color of Menu (hex format) (use --el-menu-bg-color in a style class instead) | ^[string] | #ffffff |
| text-color ^(deprecated) | text color of Menu (hex format) ( use --el-menu-text-color in a style class instead) | ^[string] | #303133 |
| active-text-color ^(deprecated) | text color of currently active menu item (hex format) ( use --el-menu-active-color in a style class instead) | ^[string] | #409eff |
| persistent ^(2.9.5) | when menu inactive and persistent is false , dropdown menu will be destroyed | ^[boolean] | true |
| Name | Description | Type |
|---|---|---|
| select | callback function when menu is activated | ^[Function]MenuSelectEvent |
| open | callback function when sub-menu expands | ^[Function]MenuOpenEvent |
| close | callback function when sub-menu collapses | ^[Function]MenuCloseEvent |
| Name | Description | Subtags |
|---|---|---|
| default | customize default content | SubMenu / Menu-Item / Menu-Item-Group |
| Name | Description | Type |
|---|---|---|
| open | open a specific sub-menu, the param is index of the sub-menu to open | ^[Function](index: string) => void |
| close | close a specific sub-menu, the param is index of the sub-menu to close | ^[Function](index: string) => void |
| handleResize | manually trigger menu width recalculation | ^[Function]() => void |
| updateActiveIndex ^(2.9.8) | set index of active menu | ^[Function](index: string) => void |
| Name | Description | Type | Default |
|---|---|---|---|
| index ^(required) | unique identification | ^[string] | — |
| popper-class | custom class name for the popup menu | ^[string] | — |
| popper-style ^(2.11.5) | custom style for the popup menu | ^[string] / ^[object] | — |
| show-timeout | timeout before showing a sub-menu(inherit show-timeout of the menu by default.) | ^[number] | — |
| hide-timeout | timeout before hiding a sub-menu(inherit hide-timeout of the menu by default.) | ^[number] | — |
| disabled | whether the sub-menu is disabled | ^[boolean] | false |
| teleported | whether popup menu is teleported to the body, the default is true for the level one SubMenu, false for other SubMenus | ^[boolean] | undefined |
| popper-offset | offset of the popper (overrides the popper of menu) | ^[number] | — |
| expand-close-icon | Icon when menu are expanded and submenu are closed, expand-close-icon and expand-open-icon need to be passed together to take effect | ^[string] / ^[Component] | — |
| expand-open-icon | Icon when menu are expanded and submenu are opened, expand-open-icon and expand-close-icon need to be passed together to take effect | ^[string] / ^[Component] | — |
| collapse-close-icon | Icon when menu are collapsed and submenu are closed, collapse-close-icon and collapse-open-icon need to be passed together to take effect | ^[string] / ^[Component] | — |
| collapse-open-icon | Icon when menu are collapsed and submenu are opened, collapse-open-icon and collapse-close-icon need to be passed together to take effect | ^[string] / ^[Component] | — |
| Name | Description | Subtags |
|---|---|---|
| default | customize default content | SubMenu / Menu-Item / Menu-Item-Group |
| title | customize title content | — |
| Name | Description | Type | Default |
|---|---|---|---|
| index ^(required) | unique identification | ^[string] | — |
| route | Vue Router Route Location Parameters | ^[string] / ^[object] | — |
| disabled | whether disabled | ^[boolean] | false |
| Name | Description | Type |
|---|---|---|
| click | callback function when menu-item is clicked, the param is menu-item instance | ^[Function](item: MenuItemRegistered) => void |
| Name | Description |
|---|---|
| default | customize default content |
| title | customize title content |
| Name | Description | Type | Default |
|---|---|---|---|
| title | group title | ^[string] | — |
| Name | Description | Subtags |
|---|---|---|
| default | customize default content | Menu-Item |
| title | customize group title | — |
Element Plus Affix component (el-affix) API documentation. Triggers when user wants to use, implement, or asks about el-affix or Affix component.
Element Plus Alert component (el-alert) API documentation. Triggers when user wants to use, implement, or asks about el-alert or Alert component.
Element Plus Anchor component (el-anchor) API documentation. Triggers when user wants to use, implement, or asks about el-anchor or Anchor component.
Element Plus Autocomplete component (el-autocomplete) API documentation. Triggers when user wants to use, implement, or asks about el-autocomplete or Autocomplete component.
Element Plus Avatar component (el-avatar) API documentation. Triggers when user wants to use, implement, or asks about el-avatar or Avatar component.
Element Plus Backtop component (el-backtop) API documentation. Triggers when user wants to use, implement, or asks about el-backtop or Backtop component.
