Menu

Menu that provides navigation for your website.

Top bar

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

Vertical Menu with sub-menus.

Collapse

Vertical Menu could be collapsed.

AttributeDescriptionTypeAccepted ValuesDefault
modemenu display modestringhorizontal / verticalvertical
collapsewhether the menu is collapsed (available only in vertical mode)booleanfalse
ellipsiswhether the menu is ellipsis (available only in horizontal mode)booleantrue
background-colorbackground color of Menu (hex format)string#ffffff
text-colortext color of Menu (hex format)string#303133
active-text-colortext color of currently active menu item (hex format)string#409EFF
default-activeindex of currently active menustring
default-openedsarray that contains indexes of currently active sub-menusArray
unique-openedwhether only one sub-menu can be activebooleanfalse
menu-triggerhow sub-menus are triggered, only works when mode is 'horizontal'stringhover / clickhover
routerwhether vue-router mode is activated. If true, index will be used as 'path' to activate the route actionbooleanfalse
collapse-transitionwhether to enable the collapse transitionbooleantrue
Methods NameDescriptionParameters
openopen a specific sub-menuindex: index of the sub-menu to open
closeclose a specific sub-menuindex: index of the sub-menu to close
Event NameDescriptionParameters
selectcallback function when menu is activatedindex: 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
opencallback function when sub-menu expandsindex: index of expanded sub-menu, indexPath: index path of expanded sub-menu
closecallback function when sub-menu collapsesindex: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu
NameDescriptionSubtags
customize default contentSubMenu / Menu-Item / Menu-Item-Group
AttributeDescriptionTypeAccepted ValuesDefault
indexunique identificationstring
popper-classcustom class name for the popup menustring
show-timeouttimeout before showing a sub-menunumber300
hide-timeouttimeout before hiding a sub-menunumber300
disabledwhether the sub-menu is disabledbooleanfalse
popper-append-to-bodywhether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this propboolean-level one SubMenu: true / other SubMenus: false
NameDescriptionSubtags
customize default contentSubMenu / Menu-Item / Menu-Item-Group
AttributeDescriptionTypeAccepted ValuesDefault
indexunique identificationstring/nullnull
routeVue Router objectobject
disabledwhether disabledbooleanfalse
Event NameDescriptionParameters
clickcallback function when menu-item is clickedel: menu-item instance
NameDescription
customize default content
AttributeDescriptionTypeAccepted ValuesDefault
titlegroup titlestring
NameDescriptionSubtags
customize default contentMenu-Item