MenuMenú

El componente Menú muestra una lista vertical de opciones. Se abre cuando el usuario interactúa con un botón u otro control.

Si necesitas implementar un menú desplegable, puedes combinarlo con el componente <mdui-dropdown>.

Uso

Importa los componentes cuando los necesites:

import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';

Importa los tipos TypeScript cuando los necesites:

import type { Menu } from 'mdui/components/menu.js';
import type { MenuItem } from 'mdui/components/menu-item.js';

Uso:

Elemento 1

Elemento 2

<mdui-menu>
  <mdui-menu-item>Elemento 1</mdui-menu-item>
  <mdui-menu-item>Elemento 2</mdui-menu-item>
</mdui-menu>

Si especificas el atributo selects como single en el componente <mdui-menu>, puedes habilitar la selección única. En este caso, el valor de value del <mdui-menu> es el valor del <mdui-menu-item> seleccionado actualmente.

Elemento 1

Elemento 2

<mdui-menu selects="single" value="item-2">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
</mdui-menu>

Fuente

Soporte de selección múltiple

Si especificas el atributo selects como multiple en el componente <mdui-menu>, puedes habilitar la selección múltiple. En este caso, el valor de value del <mdui-menu> es un array con los valores de los <mdui-menu-item> seleccionados.

Nota: En el modo de selección múltiple, el valor de value del <mdui-menu> es un array y solo se puede leer y establecer mediante la propiedad JavaScript.

Elemento 1

Elemento 2

Elemento 3

<mdui-menu selects="multiple" class="example-multiple">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
  <mdui-menu-item value="item-3">Elemento 3</mdui-menu-item>
</mdui-menu>

<script>
  // Establecer la selección predeterminada de item-1 y item-2
  const menu = document.querySelector(".example-multiple");
  menu.value = ["item-1", "item-2"];
</script>

Fuente

Icono

En el componente <mdui-menu-item>, usando los atributos icon y end-icon permiten añadir iconos de Material Icons a la izquierda y derecha del elemento del menú. El atributo end-text añade texto a la derecha. Además, también puedes añadir iconos y texto a la izquierda y derecha mediante los slots icon, end-icon y end-text.

Si necesitas dejar un espacio en blanco a la izquierda del elemento del menú para mantener la alineación con otros elementos define el atributo icon como una cadena vacía.

Elemento 1

Elemento 2

Ctrl+X

Elemento 3

<mdui-menu>
  <mdui-menu-item icon="visibility" end-icon="add_circle" end-text="Ctrl+X">Elemento 1</mdui-menu-item>
  <mdui-menu-item>
    Elemento 2
    <mdui-icon slot="icon" name="visibility"></mdui-icon>
    <mdui-icon slot="end-icon" name="add_circle"></mdui-icon>
    <span slot="end-text">Ctrl+X</span>
  </mdui-menu-item>
  <mdui-menu-item icon="">Elemento 3</mdui-menu-item>
</mdui-menu>

Fuente

En los modos de selección única o múltiple, puedes usar el atributo selected-icon o el slot selected-icon para definir el icono del estado seleccionado.

Elemento 1

Elemento 2

<mdui-menu selects="multiple">
  <mdui-menu-item value="item-1" selected-icon="cloud_done">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">
    <mdui-icon slot="selected-icon" name="done_outline"></mdui-icon>
    Elemento 2
  </mdui-menu-item>
</mdui-menu>

Fuente

Enlace

Si usas el atributo href en el componente <mdui-menu-item>, el elemento del menú se convierte en un enlace. También puedes usar los atributos relacionados con enlaces: download, target y rel.

Elemento 1

Elemento 2

<mdui-menu>
  <mdui-menu-item href="https://www.mdui.org" target="_blank">Elemento 1</mdui-menu-item>
  <mdui-menu-item>Elemento 2</mdui-menu-item>
</mdui-menu>

Fuente

Submenú

En <mdui-menu-item> puedes usar el slot submenu para definir los elementos del submenú.

Interlineado Sencillo

1.5

Doble

Personalizado: 1.2

Estilo de párrafo

<mdui-menu>
  <mdui-menu-item>
    Interlineado
    <mdui-menu-item slot="submenu">Sencillo</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Doble</mdui-menu-item>
    <mdui-menu-item slot="submenu">Personalizado: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Estilo de párrafo</mdui-menu-item>
</mdui-menu>

Fuente

En <mdui-menu> puedes usar el atributo submenu-trigger para definir cómo se activa el submenú.

Interlineado Sencillo

1.5

Doble

Personalizado: 1.2

Estilo de párrafo

<mdui-menu submenu-trigger="click">
  <mdui-menu-item>
    Interlineado
    <mdui-menu-item slot="submenu">Sencillo</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Doble</mdui-menu-item>
    <mdui-menu-item slot="submenu">Personalizado: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Estilo de párrafo</mdui-menu-item>
</mdui-menu>

Fuente

Cuando submenu-trigger se establece en hover, puedes usar submenu-open-delay y submenu-close-delay en <mdui-menu> para ajustar el retraso de apertura y cierre del submenú.

Interlineado Sencillo

1.5

Doble

Personalizado: 1.2

Estilo de párrafo

<mdui-menu submenu-trigger="hover" submenu-open-delay="1000" submenu-close-delay="1000">
  <mdui-menu-item>
    Interlineado
    <mdui-menu-item slot="submenu">Sencillo</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Doble</mdui-menu-item>
    <mdui-menu-item slot="submenu">Personalizado: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Estilo de párrafo</mdui-menu-item>
</mdui-menu>

Fuente

Contenido personalizado

En <mdui-menu-item> puedes usar el slot custom para personalizar por completo el contenido del elemento del menú.

ABS

Valor absoluto del número

ACOS

Arco coseno del número, en radianes

ACOSH

Arco coseno hiperbólico del número

<style>
  .custom-item {
    padding: 4px 12px;
  }

  .custom-item .secondary {
    display: none;
    color: #888;
    font-size: 13px;
  }

  .custom-item:hover .secondary {
    display: block
  }
</style>

<mdui-menu>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ABS</div>
      <div class="secondary">Valor absoluto del número</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOS</div>
      <div class="secondary">Arco coseno del número, en radianes</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOSH</div>
      <div class="secondary">Arco coseno hiperbólico del número</div>
    </div>
  </mdui-menu-item>
</mdui-menu>

Fuente

Atributo	Propiedad	Tipo	Predeterminado
`value`	`value`	`string`	-
Valor del elemento de menú.
`disabled`	`disabled`	`boolean`	`false`
Indica si el elemento de menú está deshabilitado.
`icon`	`icon`	`string`	-
Nombre del icono de Material Icons a la izquierda. También se puede establecer mediante `slot="icon"`. Si no es necesario mostrar un icono a la izquierda, pero se necesita reservar un espacio para el icono, se puede pasar una cadena vacía para ocupar el lugar.
`end-icon`	`endIcon`	`string`	-
Nombre del icono de Material Icons a la derecha. También se puede establecer mediante `slot="end-icon"`.
`end-text`	`endText`	`string`	-
Texto a la derecha. También se puede establecer mediante `slot="end-text"`.
`selected-icon`	`selectedIcon`	`string`	-
Nombre del icono de Material Icons para el estado seleccionado. También se puede establecer mediante `slot="selected-icon"`.
`submenu-open`	`submenuOpen`	`boolean`	`false`
Indica si el submenú está abierto.
`href`	`href`	`string`	-
URL de destino del enlace. Si se define esta propiedad, el componente se representará como un elemento `<a>` y podrá usar las propiedades de enlace.
`download`	`download`	`string`	-
Nombre del archivo para el enlace de descarga. Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Especifica dónde abrir el enlace. Los valores posibles son: `_blank`: Abrir el enlace en una nueva ventana `_parent`: Abrir el enlace en el marco principal `_self`: Predeterminado. Abrir el enlace en el marco actual `_top`: Abrir el enlace en la ventana completa Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relación entre el documento actual y el documento enlazado. Los valores posibles son: `alternate`: Versión alternativa del documento actual `author`: Autor del documento o artículo actual `bookmark`: Enlace permanente a la sección contenedora más cercana `external`: El documento referenciado no está en el mismo sitio que el documento actual `help`: Enlace a la documentación de ayuda relacionada `license`: El contenido principal del documento actual está cubierto por la licencia de derechos de autor del documento referenciado `me`: El documento actual representa al propietario del contenido enlazado `next`: El documento actual es parte de una serie y el documento referenciado es el siguiente de la serie `nofollow`: El autor o editor del documento actual no respalda el documento referenciado `noreferrer`: No incluye el encabezado `Referer`. Similar al efecto de `noopener` `opener`: Si el hipervínculo crea un contexto de navegación de nivel superior (es decir, el valor del atributo `target` es `_blank`), crea un contexto de navegación auxiliar `prev`: El documento actual es parte de una serie y el documento referenciado es el anterior de la serie `search`: Proporciona un enlace a un recurso que se puede utilizar para buscar el archivo actual y sus páginas relacionadas `tag`: Proporciona una etiqueta adecuada para el documento actual (identificada por la dirección dada) Nota: Disponible solo cuando se especifica el atributo `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
`tabindex`	`tabIndex`	`number`	-
Orden del elemento al navegar con la tecla Tab.

Nombre	Parámetros	Valor de retorno
`click`		`void`
Simula un clic del ratón en el elemento.
`focus`	`options: FocusOptions` (Opcional)	`void`
Establece el foco en el elemento actual. Puede pasarse un objeto como parámetro con las siguientes propiedades: `preventScroll`: Por defecto, cuando el elemento recibe el foco, la página se desplaza hasta mostrarlo. Si no quiere que la página se desplace, defina esta propiedad como `true`.
`blur`		`void`
Quita el foco del elemento actual.

Nombre
`focus`
Se dispara cuando recibe el foco.
`blur`
Se dispara cuando pierde el foco.
`submenu-open`
Se dispara cuando el submenú comienza a abrirse. Se puede evitar que se abra llamando a `event.preventDefault()`.
`submenu-opened`
Se dispara cuando la animación de apertura del submenú se completa.
`submenu-close`
Se dispara cuando el submenú comienza a cerrarse. Se puede evitar que se cierre llamando a `event.preventDefault()`.
`submenu-closed`
Se dispara cuando la animación de cierre del submenú se completa.

Nombre
(predeterminado)
Texto del elemento de menú.
`icon`
Icono izquierdo del elemento de menú.
`end-icon`
Icono derecho del elemento de menú.
`end-text`
Texto a la derecha del menú.
`selected-icon`
Icono en estado seleccionado.
`submenu`
Submenú.
`custom`
Cualquier contenido personalizado.

Nombre
`container`
Contenedor del elemento de menú.
`icon`
Icono izquierdo.
`label`
Contenido de texto.
`end-icon`
Icono derecho.
`end-text`
Texto derecho.
`selected-icon`
Icono en estado seleccionado.
`submenu`
Elemento de submenú.

Atributo	Propiedad	Tipo	Predeterminado
`selects`	`selects`	`'single' \| 'multiple'`	-
Indica el modo de selección de los elementos del menú. Por defecto, no son seleccionables. Los valores posibles son: `single`: Selección única `multiple`: Selección múltiple
`value`	`value`	`string \| string[]`	-
Valor del `<mdui-menu-item>` actualmente seleccionado. Nota: El atributo HTML de esta propiedad siempre es una cadena, y solo se puede establecer un valor inicial mediante el atributo HTML cuando `selects="single"`. El valor de la propiedad de JavaScript es una cadena cuando `selects="single"`, y es un array de cadenas cuando `selects="multiple"`. Por lo tanto, cuando `selects="multiple"`, para modificar este valor, solo se puede modificar la propiedad de JavaScript.
`dense`	`dense`	`boolean`	`false`
Indica si los elementos del menú utilizan un diseño compacto.
`submenu-trigger`	`submenuTrigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'click hover'`
Modo de activación del submenú, admite múltiples valores separados por espacios. Los valores posibles son: `click`: Abrir el submenú al hacer clic en el elemento del menú `hover`: Abrir el submenú al pasar el ratón sobre el elemento del menú `focus`: Abrir el submenú cuando el elemento del menú recibe el foco `manual`: Solo se puede abrir y cerrar mediante programación, no se pueden especificar otras formas de activación
`submenu-open-delay`	`submenuOpenDelay`	`number`	`200`
Retraso para abrir el submenú al pasar el ratón, en milisegundos.
`submenu-close-delay`	`submenuCloseDelay`	`number`	`200`
Retraso para cerrar el submenú al pasar el ratón, en milisegundos.

Nombre	Parámetros	Valor de retorno
`focus`	`options: FocusOptions` (Opcional)	`void`
Establece el foco en el elemento actual.
`blur`		`void`
Quita el foco del elemento actual.

Nombre
`change`
Se dispara cuando cambia el estado de selección de los elementos del menú.

Nombre
(predeterminado)
Elementos como submenús (`<mdui-menu-item>`), separadores (`<mdui-divider>`), etc.

Nombre
`--shape-corner`
Tamaño de la esquina redondeada del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.

Capítulo anterior

List Lista

Capítulo siguiente

NavigationBar Barra de navegación

MenuMenú

Uso

Ejemplos

Diseño compacto

Deshabilitar elementos del menú

Soporte de selección única

Soporte de selección múltiple

Icono

Enlace

Submenú

Contenido personalizado

`mdui-menu-item` API

Propiedades

Métodos

Eventos

Slots

CSS Parts

`mdui-menu` API

Propiedades

Métodos

Eventos

Slots

CSS Custom Properties