<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>
  // Imposta la selezione predefinita su item-1 e item-2
  const menu = document.querySelector(".example-multiple");
  menu.value = ["item-1", "item-2"];
</script>

Sorgente

Icone

Per aggiungere Icone Material a sinistra e a destra, aggiungi gli attributi icon, end-icon a <mdui-menu-item>. Usa l'attributo end-text per aggiungere testo sul lato destro. Oppure, usa gli slot icon, end-icon, end-text per lo stesso scopo.

Impostare l'attributo icon su una stringa vuota riserva spazio per un'icona a sinistra in modo che l'elemento si allinei con gli altri.

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>

Sorgente

Per la selezione singola o multipla, usa l'attributo o lo slot selected-icon per definire l'icona dello stato selezionato.

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>

Sorgente

Link

Per trasformare la voce di menu in un link, usa l'attributo href sul componente <mdui-menu-item>. Gli attributi download, target e rel sono disponibili per le normali funzionalità dei link.

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>

Sorgente

Sottomenu

Usa lo slot submenu in <mdui-menu-item> per definire le voci del sottomenu.

Interlinea Singola

1.5

Doppia

Personalizzata: 1.2

Stile paragrafo

<mdui-menu>
  <mdui-menu-item>
    Interlinea
    <mdui-menu-item slot="submenu">Singola</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Doppia</mdui-menu-item>
    <mdui-menu-item slot="submenu">Personalizzata: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Stile paragrafo</mdui-menu-item>
</mdui-menu>

Sorgente

Usa l'attributo submenu-trigger su <mdui-menu> per definire come si apre il sottomenu.

Interlinea Singola

1.5

Doppia

Personalizzata: 1.2

Stile paragrafo

<mdui-menu submenu-trigger="click">
  <mdui-menu-item>
    Interlinea
    <mdui-menu-item slot="submenu">Singola</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Doppia</mdui-menu-item>
    <mdui-menu-item slot="submenu">Personalizzata: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Stile paragrafo</mdui-menu-item>
</mdui-menu>

Sorgente

Quando è impostato submenu-trigger="hover", usa gli attributi submenu-open-delay e submenu-close-delay su <mdui-menu> per impostare il ritardo per l'apertura e la chiusura del sottomenu.

Interlinea Singola

1.5

Doppia

Personalizzata: 1.2

Stile paragrafo

<mdui-menu submenu-trigger="hover" submenu-open-delay="1000" submenu-close-delay="1000">
  <mdui-menu-item>
    Interlinea
    <mdui-menu-item slot="submenu">Singola</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Doppia</mdui-menu-item>
    <mdui-menu-item slot="submenu">Personalizzata: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Stile paragrafo</mdui-menu-item>
</mdui-menu>

Sorgente

Contenuto Personalizzato

Per personalizzare completamente il contenuto della voce di menu, usa lo slot custom in <mdui-menu-item>.

ABS

Valore assoluto del numero

ACOS

Arco coseno del numero, in radianti

ACOSH

Coseno iperbolico inverso del numero

<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">Valore assoluto del numero</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOS</div>
      <div class="secondary">Arco coseno del numero, in radianti</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOSH</div>
      <div class="secondary">Coseno iperbolico inverso del numero</div>
    </div>
  </mdui-menu-item>
</mdui-menu>

Sorgente

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`value`	`value`	`string`	-
Valore dell'elemento di menu
`disabled`	`disabled`	`boolean`	`false`
Se l'elemento di menu deve essere disabilitato
`icon`	`icon`	`string`	-
Nome dell'icona Material a sinistra. Può essere specificato anche tramite `slot="icon"`. Se non serve mostrare un'icona a sinistra, ma vuoi riservare uno spazio per un'icona, puoi passare una stringa vuota come segnaposto.
`end-icon`	`endIcon`	`string`	-
Nome dell'icona Material a destra. Può essere specificato anche tramite `slot="end-icon"`.
`end-text`	`endText`	`string`	-
Testo a destra. Può anche essere impostato tramite `slot="end-text"`.
`selected-icon`	`selectedIcon`	`string`	-
Nome dell'icona Material per lo stato selezionato. Può anche essere impostato tramite `slot="selected-icon"`.
`submenu-open`	`submenuOpen`	`boolean`	`false`
Indica se aprire il sottomenu
`href`	`href`	`string`	-
URL di destinazione del collegamento. Se questa proprietà è impostata, il componente viene renderizzato come elemento `<a>` e sarà possibile utilizzare le proprietà relative ai collegamenti.
`download`	`download`	`string`	-
Destinazione del download del collegamento. Nota: questa proprietà è valida solo se è impostato l'attributo `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Modalità di apertura del collegamento. I valori opzionali includono: `_blank`: apre il collegamento in una nuova finestra `_parent`: apre il collegamento nel frame genitore `_self`: predefinita. Apre il collegamento nel frame corrente `_top`: apre il collegamento nell'intera finestra Nota: questa proprietà è valida solo se è impostato l'attributo `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relazione tra il documento corrente e il documento collegato. I valori opzionali includono: `alternate`: versione alternativa del documento corrente `author`: autore del documento o dell'articolo corrente `bookmark`: collegamento permanente al capitolo antenato più vicino `external`: il documento di destinazione non appartiene allo stesso sito del documento corrente `help`: collegamento alla guida di riferimento `license`: il contenuto principale del documento corrente è coperto dalla licenza indicata nel documento di destinazione `me`: il documento corrente rappresenta il proprietario del contenuto collegato `next`: il documento corrente fa parte di una serie e il documento di destinazione è il successivo `nofollow`: l'autore o l'editore del documento corrente non avalla il documento di destinazione `noreferrer`: non include l'intestazione `Referer`. Simile a `noopener` `opener`: se il collegamento ipertestuale apre un contesto di navigazione di primo livello (cioè il valore dell'attributo `target` è `_blank`), crea un contesto di navigazione ausiliario `prev`: il documento corrente fa parte di una serie e il documento di destinazione è il precedente `search`: fornisce un collegamento a una risorsa per la ricerca nel documento corrente e nelle pagine correlate `tag`: associa un tag al documento corrente (identificato dall'indirizzo specificato) Nota: disponibile solo quando è specificato l'attributo `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Se deve ricevere automaticamente il focus al caricamento della pagina
`tabindex`	`tabIndex`	`number`	-
Ordine di tabulazione dell'elemento

Nome	Parametri	Restituisce
`click`		`void`
Simula un clic del mouse sull'elemento
`focus`	`options: FocusOptions` (Opzionale)	`void`
Imposta il focus sull'elemento corrente. È possibile passare un oggetto come parametro, le cui proprietà includono: `preventScroll`: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su `true`.
`blur`		`void`
Rimuove il focus dall'elemento corrente

Nome
`focus`
Attivato quando si riceve il focus
`blur`
Attivato quando si perde il focus
`submenu-open`
L'evento viene attivato all'inizio dell'apertura del sottomenu. È possibile impedire l'apertura del sottomenu chiamando `event.preventDefault()`.
`submenu-opened`
L'evento viene attivato al termine dell'animazione di apertura del sottomenu.
`submenu-close`
L'evento viene attivato all'inizio della chiusura del sottomenu. È possibile impedire la chiusura del sottomenu chiamando `event.preventDefault()`.
`submenu-closed`
L'evento viene attivato al termine dell'animazione di chiusura del sottomenu.

Nome
(predefinito)
Testo dell'elemento di menu
`icon`
Icona a sinistra dell'elemento di menu
`end-icon`
Icona a destra dell'elemento di menu
`end-text`
Testo a destra del menu
`selected-icon`
Icona nello stato selezionato
`submenu`
Sottomenu
`custom`
Qualsiasi contenuto personalizzato

Nome
`container`
Contenitore dell'elemento di menu
`icon`
Icona a sinistra
`label`
Contenuto testuale
`end-icon`
Icona a destra
`end-text`
Testo a destra
`selected-icon`
Icona nello stato selezionato
`submenu`
Elemento del sottomenu

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`selects`	`selects`	`'single' \| 'multiple'`	-
Stato di selezione degli elementi del menu. Non selezionabile per impostazione predefinita. I valori opzionali includono: `single`: selezione singola `multiple`: selezione multipla
`value`	`value`	`string \| string[]`	-
Valore del `<mdui-menu-item>` attualmente selezionato. Nota: l'attributo HTML di questa proprietà è sempre una stringa e può essere impostato come valore iniziale tramite l'attributo HTML solo quando `selects="single"`. Il valore della proprietà JavaScript è una stringa quando `selects="single"` e un array di stringhe quando `selects="multiple"`. Pertanto, quando `selects="multiple"`, per modificare questo valore, è possibile farlo solo tramite la proprietà JavaScript.
`dense`	`dense`	`boolean`	`false`
Se gli elementi del menu utilizzano un layout compatto
`submenu-trigger`	`submenuTrigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'click hover'`
Modalità di apertura del sottomenu. Supporta più valori separati da spazi. I valori opzionali includono: `click`: apre il sottomenu quando si fa clic sull'elemento del menu `hover`: apre il sottomenu quando si passa il mouse sull'elemento del menu `focus`: apre il sottomenu quando si mette a fuoco l'elemento del menu `manual`: può essere aperto e chiuso solo via codice; non è possibile specificare altre modalità di apertura
`submenu-open-delay`	`submenuOpenDelay`	`number`	`200`
Ritardo per l'apertura del sottomenu attivato dal passaggio del mouse, in millisecondi
`submenu-close-delay`	`submenuCloseDelay`	`number`	`200`
Ritardo per la chiusura del sottomenu attivato dal passaggio del mouse, in millisecondi

Nome	Parametri	Restituisce
`focus`	`options: FocusOptions` (Opzionale)	`void`
Imposta il focus sull'elemento corrente
`blur`		`void`
Rimuove il focus dall'elemento corrente

Nome
`change`
Attivato quando lo stato di selezione degli elementi del menu cambia

Nome
(predefinito)
Elementi come voci del sottomenu (`<mdui-menu-item>`), divider (`<mdui-divider>`), ecc.

Nome
`--shape-corner`
Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.

Capitolo precedente

List

Capitolo successivo

NavigationBar

Menu

Utilizzo

Esempi

Stile Denso

Elementi Disabilitati

Selezione Singola

Selezione Multipla

Icone

Link

Sottomenu

Contenuto Personalizzato

`mdui-menu-item` API

Proprietà

Metodi

Eventi

Slots

CSS Parts

`mdui-menu` API

Proprietà

Metodi

Eventi

Slots

CSS Custom Property