MenuMenu

O componente menu fornece uma série de opções dispostas verticalmente. O menu é exibido quando o usuário interage com um botão ou outro controle.

Se você precisar implementar um menu suspenso, pode usar o componente <mdui-dropdown>.

Como usar

Importe os componentes conforme necessário:

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

Importe os tipos TypeScript dos componentes conforme necessário:

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

Exemplo de uso:

Item 1

Item 2

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

Defina o atributo selects como single no componente <mdui-menu> para habilitar a seleção única. Assim, o valor value do <mdui-menu> será o valor value do <mdui-menu-item> atualmente selecionado.

Item 1

Item 2

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

Fonte

Suporte a seleção múltipla

Defina o atributo selects como multiple no componente <mdui-menu> para habilitar a seleção múltipla. Assim, o valor value do <mdui-menu> será um array dos valores value dos <mdui-menu-item> atualmente selecionados.

Nota: No modo de seleção múltipla, o valor value do <mdui-menu> é um array e só pode ser lido e definido por propriedades JavaScript.

Item 1

Item 2

Item 3

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

<script>
  // Define a seleção padrão para item-1 e item-2
  const menu = document.querySelector(".example-multiple");
  menu.value = ["item-1", "item-2"];
</script>

Fonte

Ícone

No componente <mdui-menu-item>, use os atributos icon e end-icon para adicionar ícones do Material Icons à esquerda e à direita do item do menu, respectivamente. Use o atributo end-text para adicionar texto à direita. Além disso, você pode usar os slots icon, end-icon e end-text para adicionar ícones e texto à esquerda e à direita do item do menu.

Se você precisar deixar um espaço vazio para ícone à esquerda do item do menu para manter o alinhamento com outros itens, defina o atributo icon como uma string vazia.

Item 1

Item 2

Ctrl+X

Item 3

<mdui-menu>
  <mdui-menu-item icon="visibility" end-icon="add_circle" end-text="Ctrl+X">Item 1</mdui-menu-item>
  <mdui-menu-item>
    Item 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="">Item 3</mdui-menu-item>
</mdui-menu>

Fonte

No modo de seleção única ou múltipla, você pode usar o atributo selected-icon ou o slot selected-icon para definir o ícone do estado selecionado.

Item 1

Item 2

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

Fonte

Link

Defina o atributo href no componente <mdui-menu-item> para transformar o item do menu em um link. Assim, você também pode usar os atributos relacionados a links: download, target e rel.

Item 1

Item 2

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

Fonte

Submenu

No componente <mdui-menu-item>, use o slot submenu para especificar os elementos do submenu.

Line spacing Single

1.5

Double

Custom: 1.2

Paragraph style

<mdui-menu>
  <mdui-menu-item>
    Line spacing
    <mdui-menu-item slot="submenu">Single</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Double</mdui-menu-item>
    <mdui-menu-item slot="submenu">Custom: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Paragraph style</mdui-menu-item>
</mdui-menu>

Fonte

No componente <mdui-menu>, você pode usar o atributo submenu-trigger para definir o modo de acionamento do submenu.

Line spacing Single

1.5

Double

Custom: 1.2

Paragraph style

<mdui-menu submenu-trigger="click">
  <mdui-menu-item>
    Line spacing
    <mdui-menu-item slot="submenu">Single</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Double</mdui-menu-item>
    <mdui-menu-item slot="submenu">Custom: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Paragraph style</mdui-menu-item>
</mdui-menu>

Fonte

Quando submenu-trigger é definido como hover, você pode usar os atributos submenu-open-delay e submenu-close-delay no componente <mdui-menu> para definir o atraso de abertura e fechamento do submenu.

Line spacing Single

1.5

Double

Custom: 1.2

Paragraph style

<mdui-menu submenu-trigger="hover" submenu-open-delay="1000" submenu-close-delay="1000">
  <mdui-menu-item>
    Line spacing
    <mdui-menu-item slot="submenu">Single</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Double</mdui-menu-item>
    <mdui-menu-item slot="submenu">Custom: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Paragraph style</mdui-menu-item>
</mdui-menu>

Fonte

Conteúdo personalizado

No componente <mdui-menu-item>, você pode usar o slot custom para personalizar completamente o conteúdo do item do menu.

ABS

Retorna o valor absoluto de um número

ACOS

Retorna o arco cosseno de um número, em radianos

ACOSH

Retorna o arco cosseno hiperbólico de um 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">Retorna o valor absoluto de um número</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOS</div>
      <div class="secondary">Retorna o arco cosseno de um número, em radianos</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOSH</div>
      <div class="secondary">Retorna o arco cosseno hiperbólico de um número</div>
    </div>
  </mdui-menu-item>
</mdui-menu>

Fonte

Atributo	Propriedade	Tipo	Padrão
`value`	`value`	`string`	-
O valor do item de menu.
`disabled`	`disabled`	`boolean`	`false`
Define se o item de menu está desabilitado.
`icon`	`icon`	`string`	-
Nome do ícone Material Icons à esquerda. Também pode ser definido via `slot="icon"`. Se nenhum ícone precisar ser exibido à esquerda, mas um espaço para ícone for necessário, pode-se passar uma string vazia para reservar o espaço.
`end-icon`	`endIcon`	`string`	-
Nome do ícone Material Icons à direita. Também pode ser definido via `slot="end-icon"`.
`end-text`	`endText`	`string`	-
Texto à direita. Também pode ser definido via `slot="end-text"`.
`selected-icon`	`selectedIcon`	`string`	-
Nome do ícone Material Icons para o estado selecionado. Também pode ser definido via `slot="selected-icon"`.
`submenu-open`	`submenuOpen`	`boolean`	`false`
Define se o submenu está aberto.
`href`	`href`	`string`	-
A URL de destino do link. Ao definir esta propriedade, o componente será renderizado internamente como um elemento `<a>` e poderá usar atributos de link.
`download`	`download`	`string`	-
O nome do arquivo para download. Nota: Esta propriedade só é válida quando o atributo `href` está definido.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Define como o link será aberto. Os valores possíveis são: `_blank`: Abre o link em uma nova janela `_parent`: Abre o link no frame pai `_self`: Padrão. Abre o link no frame atual `_top`: Abre o link na janela inteira Nota: Esta propriedade só é válida quando o atributo `href` está definido.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
A relação entre o documento atual e o documento vinculado. Os valores possíveis são: `alternate`: Versão alternativa do documento atual `author`: Autor do documento atual ou artigo `bookmark`: Link permanente para a seção ancestral mais próxima `external`: O documento referenciado não está no mesmo site do documento atual `help`: Link para documentação de ajuda relacionada `license`: O conteúdo principal do documento atual está coberto pela licença de direitos autorais do arquivo referenciado `me`: O documento atual representa o proprietário do conteúdo vinculado `next`: O documento atual faz parte de uma série, e o documento referenciado é o próximo da série `nofollow`: O autor ou editor do documento atual não endossa o arquivo referenciado `noreferrer`: Não inclui o cabeçalho `Referer`. Tem efeito semelhante ao `noopener` `opener`: Se o hiperlink criar um contexto de navegação de nível superior (ou seja, o valor do atributo `target` for `_blank`), cria um contexto de navegação auxiliar `prev`: O documento atual faz parte de uma série, e o documento referenciado é o anterior da série `search`: Fornece um link para um recurso que pode ser usado para pesquisar o arquivo atual e suas páginas relacionadas `tag`: Fornece uma tag (identificada pelo endereço fornecido) aplicável ao documento atual Nota: Disponível apenas quando o atributo `href` é especificado.
`autofocus`	`autofocus`	`boolean`	`false`
Define se o elemento deve receber foco automaticamente após o carregamento da página.
`tabindex`	`tabIndex`	`number`	-
A ordem do elemento ao navegar com a tecla Tab.

Nome	Parâmetros	Retorno
`click`		`void`
Simula um clique do mouse no elemento.
`focus`	`options: FocusOptions` (Opcional)	`void`
Define o foco no elemento atual. Você pode passar um objeto como argumento, com as seguintes propriedades: `preventScroll`: Por padrão, após o elemento receber o foco, a página é rolada para que ele fique visível. Se você não quiser que a página role, defina esta propriedade como `true`.
`blur`		`void`
Remove o foco do elemento atual.

Nome
`focus`
Disparado ao receber foco.
`blur`
Disparado ao perder o foco.
`submenu-open`
Disparado quando o submenu começa a abrir. Pode impedir a abertura chamando `event.preventDefault()`.
`submenu-opened`
Disparado quando a animação de abertura do submenu é concluída.
`submenu-close`
Disparado quando o submenu começa a fechar. Pode impedir o fechamento chamando `event.preventDefault()`.
`submenu-closed`
Disparado quando a animação de fechamento do submenu é concluída.

Nome
(padrão)
Texto do item de menu.
`icon`
Ícone à esquerda do item de menu.
`end-icon`
Ícone à direita do item de menu.
`end-text`
Texto à direita do item de menu.
`selected-icon`
Ícone do estado selecionado.
`submenu`
Submenu.
`custom`
Qualquer conteúdo personalizado.

Nome
`container`
Contêiner do item de menu.
`icon`
Ícone à esquerda.
`label`
Conteúdo de texto.
`end-icon`
Ícone à direita.
`end-text`
Texto à direita.
`selected-icon`
Ícone do estado selecionado.
`submenu`
Elemento de submenu.

Atributo	Propriedade	Tipo	Padrão
`selects`	`selects`	`'single' \| 'multiple'`	-
Estado de seleção dos itens do menu. O padrão é não selecionável. Os valores possíveis são: `single`: Seleção única. `multiple`: Seleção múltipla.
`value`	`value`	`string \| string[]`	-
O valor do `<mdui-menu-item>` atualmente selecionado. Nota: O atributo HTML desta propriedade é sempre uma string e só pode definir o valor inicial via atributo HTML quando `selects="single"`; o valor da propriedade JavaScript é uma string quando `selects="single"`, e um array de strings quando `selects="multiple"`. Portanto, quando `selects="multiple"`, para modificar este valor, só é possível alterando a propriedade JavaScript.
`dense`	`dense`	`boolean`	`false`
Define se os itens do menu usam layout compacto.
`submenu-trigger`	`submenuTrigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'click hover'`
Forma de acionamento do submenu. Suporta múltiplos valores separados por espaço. Os valores possíveis são: `click`: Abre o submenu ao clicar no item do menu. `hover`: Abre o submenu ao passar o mouse sobre o item do menu. `focus`: Abre o submenu ao focar no item do menu. `manual`: Só pode ser aberto e fechado programaticamente. Não pode ser combinado com outras formas de acionamento.
`submenu-open-delay`	`submenuOpenDelay`	`number`	`200`
Atraso, em milissegundos, para abrir o submenu ao passar o mouse.
`submenu-close-delay`	`submenuCloseDelay`	`number`	`200`
Atraso, em milissegundos, para fechar o submenu ao passar o mouse.

Nome	Parâmetros	Retorno
`focus`	`options: FocusOptions` (Opcional)	`void`
Define o foco no elemento atual.
`blur`		`void`
Remove o foco do elemento atual.

Nome
`change`
Disparado quando o estado de seleção dos itens do menu muda.

Nome
(padrão)
Elementos como itens de submenu (`<mdui-menu-item>`), divisores (`<mdui-divider>`), etc.

Nome
`--shape-corner`
Tamanho da borda arredondada do componente. Pode ser um valor em pixels, mas é recomendado usar os design tokens.

Capítulo anterior

List Lista

Próximo capítulo

NavigationBar Barra de navegação

MenuMenu

Como usar

Exemplos

Layout compacto

Desabilitar item do menu

Suporte a seleção única

Suporte a seleção múltipla

Ícone

Link

Submenu

Conteúdo personalizado

`mdui-menu-item` API

Propriedades

Métodos

Eventos

Slots

CSS Parts

`mdui-menu` API

Propriedades

Métodos

Eventos

Slots

Propriedades CSS personalizadas