Menu

Menú que proporciona navegación para su sitio web.

TIP

Este componente requiere el envoltorio <client-only></client-only> cuando se utiliza en SSR (por ejemplo: Nuxt) y SSG (por ejemplo: VitePress).

Barra superior

Menú de barra superior, se puede utilizar en una variedad de escenarios.

Izquierda y derecha

Barra lateral

Menú vertical con submenús.

Collapse

El menú vertical puede ser colapsado.

Popper Offset 2.4.4

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

Nombre	Descripción	Tipo	Valores Aceptados	Por defecto
mode	modo de visualización del menú	string	horizontal / vertical	vertical
collapse	si el menú está colapsado (solo en modo vertical)	boolean	—	false
ellipsis	si el menú es elipsis (disponible sólo en modo horizontal)	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	color de fondo del menú (formato hexadecimal) (obsoleto, use `--bg-color` en su lugar)	string	—	#ffffff
text-color	color de texto del menú (formato hexadecimal) (obsoleto, use `--text-color` en su lugar)	string	—	#303133
active-text-color	color de texto del elemento de menú activo (formato hexadecimal) (obsoleto, use `--active-color` en su lugar)	string	—	#409eff
default-active	índice del menú activo al cargar la página	string	—	—
default-openeds	array que contiene los índices de los sub-menús activos actualmente	Array	—	—
unique-opened	si sólo un submenú puede estar activo	boolean	—	false
menu-trigger	cómo se activan los submenús, solo funciona cuando `mode` es 'horizontal'	string	hover / click	hover
router	si el modo `vue-router` está activado. Si es verdadero, el índice se utilizará como 'ruta' para activar la acción de la ruta. Utilice con `default-active` para establecer el elemento activo en carga.	boolean	—	false
collapse-transition	si habilitar transition en el colapso	boolean	—	true
popper-effect 2.2.26	Tema Tooltip, tema integrado: `dark` / `light` cuando el menú está colapsado	string	dark / light	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

Nombre	Descripción	Parámetros
open	Open a specific sub-menu	index: índice del sub-menú para abrir
close	Close a specific sub-menu	index: índice del sub-menú para cerrar

Nombre	Descripción	Parámetros
select	callback ejecutado cuando el menú es activado	index: índice del menú activado, indexPath: index path del menú activado, item: el elemento de menú seleccionado, routeResult: resultado devuelto por `vue-router` si `router` está activado
open	función callback cuando el submenú se expande	index: índice del sub-menú expandido, indexPath: index path del sub-menú expandido
close	función callback cuando el submenú colapsa	index: índice del sub-menú colapsado, indexPath: index path del menú colapsado

Nombre	Descripción	Subtags
—	personaliza el contenido por defecto	SubMenu / Menu-Item / Menu-Item-Group

Atributos SubMenu

Nombre	Descripción	Tipo	Valores Aceptados	Por defecto
index	identificador único	string	—	—
popper-class	nombre personalizado de la clase del menú popup	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	si el submenú está deshabilitado	boolean	—	false
popper-append-to-body deprecated	si se debe agregar el menú emergente al body. Si la posición del menú es incorrecta, puede intentar ajustar esta propiedad	boolean	—	level one SubMenu: true / other SubMenus: false
teleported	si el menú emergente se teletransporta al cuerpo	boolean	—	level one SubMenu: true / other SubMenus: false
popper-offset	offset of the popper (overrides the `popper` of menu)	number	—	—
expand-close-icon	El icono cuando el menú se expanda y el submenú se cierran, `expand-close-icon` y `expand-open-icon` deben pasarse juntos para que surtan efecto	`string \| Component`	—	—
expand-open-icon	El icono cuando el menú se expanda y el submenú se abre, `expand-close-icon` y `expand-open-icon` deben pasarse juntos para que surtan efecto	`string \| Component`	—	—
collapse-close-icon	El icono cuando el menú se expanda y el submenú se cierra, `expand-close-icon` y `expand-open-icon` deben pasarse juntos para que surtan efecto	`string \| Component`	—	—
collapse-open-icon	El icono cuando el menú se expanda y el submenú se abra, `expand-close-icon` y `expand-open-icon` deben pasarse juntos para que surtan efecto	`string \| Component`	—	—