Menu

Menu that provides navigation for your website.

TIP

This component requires the <client-only></client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).

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.

Popper Offset 2.4.4

Menu with popperOffset will override Submenu's popper-offset.

Name	Description	Type	Default
mode	menu display mode	`enum`	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
background-color deprecated	background color of Menu (hex format) (deprecated, use `--bg-color` instead)	`string`	#ffffff
text-color deprecated	text color of Menu (hex format) (deprecated, use `--text-color` instead)	`string`	#303133
active-text-color deprecated	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	`object`	[]
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
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
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	`string`	—
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

Name	Description	Type
select	callback function when menu is activated	`Function`
open	callback function when sub-menu expands	`Function`
close	callback function when sub-menu collapses	`Function`

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`
close	close a specific sub-menu, the param is index of the sub-menu to close	`Function`

SubMenu API

SubMenu Attributes

Name	Description	Type	Default
index required	unique identification	`string`	—
popper-class	custom class name for the popup menu	`string`	—
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`	—

SubMenu Slots

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

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

Name	Description	Type
click	callback function when menu-item is clicked, the param is menu-item instance	`Function`

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	—

Type Declarations

Show declarations

/**
 * @param index index of activated menu
 * @param indexPath index path of activated menu
 * @param item the selected menu item
 * @param routerResult result returned by `vue-router` if `router` is enabled
 */
type MenuSelectEvent = (
  index: string,
  indexPath: string[],
  item: MenuItemClicked,
  routerResult?: Promise<void | NavigationFailure>
) => void

/**
 * @param index index of expanded sub-menu
 * @param indexPath index path of expanded sub-menu
 */
type MenuOpenEvent = (index: string, indexPath: string[]) => void

/**
 * @param index index of collapsed sub-menu
 * @param indexPath index path of collapsed sub-menu
 */
type MenuCloseEvent = (index: string, indexPath: string[]) => void

interface MenuItemRegistered {
  index: string
  indexPath: string[]
  active: boolean
}

interface MenuItemClicked {
  index: string
  indexPath: string[]
  route?: RouteLocationRaw
}