Menu

Menu that provides navigation for your website.

Top bar

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

Left And Right

Vertical Menu with sub-menus.

Collapse

Vertical Menu could be collapsed.

NameDescriptionTypeAccepted 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) (deprecated, use --bg-color instead)string#ffffff
text-colortext color of Menu (hex format) (deprecated, use --text-color instead)string#303133
active-text-colortext color of currently active menu item (hex format) (deprecated, use --active-color instead)string#409EFF
default-activeindex of active menu on page loadstring
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 action. Use with default-active to set the active item on load.booleanfalse
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
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
NameDescriptionTypeAccepted 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-body(deprecated)whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this propbooleanlevel one SubMenu: true / other SubMenus: false
popper-offsetoffset of the poppernumber6
expand-close-iconIcon when menu are expanded and submenu are closed, expand-close-icon and expand-open-icon need to be passed together to take effectstring | Component
expand-open-iconIcon when menu are expanded and submenu are opened, expand-open-icon and expand-close-icon need to be passed together to take effectstring | Component
collapse-close-iconIcon when menu are collapsed and submenu are closed, collapse-close-icon and collapse-open-icon need to be passed together to take effectstring | Component
collapse-open-iconIcon when menu are collapsed and submenu are opened, collapse-open-icon and collapse-close-icon need to be passed together to take effectstring | Component
NameDescriptionSubtags
customize default contentSubMenu / Menu-Item / Menu-Item-Group
titlecustomize title content
NameDescriptionTypeAccepted ValuesDefault
indexunique identificationstring/nullnull
routeVue Router objectobject
disabledwhether disabledbooleanfalse
NameDescriptionParameters
clickcallback function when menu-item is clickedel: menu-item instance
NameDescription
customize default content
titlecustomize title content
NameDescriptionTypeAccepted ValuesDefault
titlegroup titlestring
NameDescriptionSubtags
customize default contentMenu-Item
titlecustomize group title

Source

ComponentDocs

Contributors