title: Menu

lang: en-US

Menu

Menu that provides navigation for your website.

Top bar

Top bar Menu can be used in a variety of scenarios.

:::demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the sub-menu component to create a second level menu. Menu provides background-color, text-color and active-text-color to customize the colors.

menu/basic

:::

Left And Right

:::demo You can make the menu items to the left or right.

menu/left-and-right

:::

Side bar

Vertical Menu with sub-menus.

:::demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.

menu/vertical

:::

Collapse

Vertical Menu could be collapsed.

:::demo

menu/collapse

:::

Menu Attributes

Name	Description	Type	Accepted Values	Default
mode	menu display mode	string	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
background-color	background color of Menu (hex format) (deprecated, use `--bg-color` instead)	string	—	#ffffff
text-color	text color of Menu (hex format) (deprecated, use `--text-color` instead)	string	—	#303133
active-text-color	text color of currently active menu item (hex format) (deprecated, use `--active-color` instead)	string	—	#409EFF
default-active	index of active menu on page load	string	—	—
default-openeds	array that contains indexes of currently active sub-menus	Array	—	—
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'	string	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

Menu Methods

Methods Name	Description	Parameters
open	open a specific sub-menu	index: index of the sub-menu to open
close	close a specific sub-menu	index: index of the sub-menu to close

Menu Events

Name	Description	Parameters
select	callback function when menu is activated	index: index of activated menu, indexPath: index path of activated menu, item: the selected menu item, routeResult: result returned by `vue-router` if `router` is enabled
open	callback function when sub-menu expands	index: index of expanded sub-menu, indexPath: index path of expanded sub-menu
close	callback function when sub-menu collapses	index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu

Menu Slots

Name	Description	Subtags
—	customize default content	SubMenu / Menu-Item / Menu-Item-Group

SubMenu Attributes

Name	Description	Type	Accepted Values	Default
index	unique identification	string	—	—
popper-class	custom class name for the popup menu	string	—	—
show-timeout	timeout before showing a sub-menu	number	—	300
hide-timeout	timeout before hiding a sub-menu	number	—	300
disabled	whether the sub-menu is disabled	boolean	—	false
popper-append-to-body(deprecated)	whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop	boolean	—	level one SubMenu: true / other SubMenus: false
popper-offset	offset of the popper	number	—	6
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`	—	—

SubMenu Slots

Name	Description	Subtags
—	customize default content	SubMenu / Menu-Item / Menu-Item-Group
title	customize title content	—

Menu-Item Attributes

Name	Description	Type	Accepted Values	Default
index	unique identification	string/null	—	null
route	Vue Router object	object	—	—
disabled	whether disabled	boolean	—	false

Menu-Item Events

Name	Description	Parameters
click	callback function when menu-item is clicked	el: menu-item instance

Menu-Item Slots

Name	Description
—	customize default content
title	customize title content

Menu-Item-Group Attributes

Name	Description	Type	Accepted Values	Default
title	group title	string	—	—

Menu-Item-Group Slots

Name	Description	Subtags
—	customize default content	Menu-Item
title	customize group title	—