Menu

Os menus exibem uma lista de opções em superfícies temporárias.

A menu displays a list of choices on a temporary surface. Aparece quando o usuário interage com um botão ou outro controle.

Basic menu

A basic menu opens over the anchor element by default (this option can be changed via props). When close to a screen edge, a basic menu vertically realigns to make sure that all menu items are completely visible.

Escolhendo uma opção deve confirmar imediatamente a opção e fechar o menu.

Desambiguação: Em contraste com menus simples, uma caixa de diálogo simples pode apresentar detalhes adicionais relacionados às opções disponíveis para um item da lista ou fornecer navegação ou ações indiretas relacionada à tarefa principal. Embora possam exibir o mesmo conteúdo, menus simples são preferidos em relação a diálogos simples, pois menus simples são menos prejudiciais ao contexto atual do usuário.

<Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
  Open Menu
</Button>
<Menu
  id="simple-menu"
  anchorEl={anchorEl}
  keepMounted
  open={Boolean(anchorEl)}
  onClose={handleClose}
>
  <MenuItem onClick={handleClose}>Profile</MenuItem>
  <MenuItem onClick={handleClose}>My account</MenuItem>
  <MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>

Selected menu

Se usado para a seleção de itens, quando abertos, menus simples tentam alinhar verticalmente o item de menu atualmente selecionado com o elemento de âncora, e o foco inicial será colocado no item de menu selecionado. O item de menu atualmente selecionado é definido usando a propriedadeselected(de ListItem). Para usar um item de menu selecionado sem afetar o foco inicial ou o posicionamento vertical do menu, defina a propriedade variant como menu.

Positioned menu

Because the Menu component uses the Popover component to position itself, you can use the same positioning props to position it. For instance, you can display the menu below the anchor:

Composição de MenuList

O componente Menu usa o componente Popover internamente. No entanto, você pode querer usar uma estratégia de posicionamento diferente ou não bloquear a rolagem. Para atender a essas situações, disponibilizamos um componente MenuList que você pode compor com o uso do Popper, veja o exemplo a seguir.

A principal responsabilidade do componente MenuList é manipular o foco.

Customized menu

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.

O MenuItem é um encapsulador em torno de ListItem com alguns estilos adicionais. Você pode usar os mesmos recursos de composição de lista com o componente MenuItem:

🎨 Se você está procurando inspiração, você pode verificar os exemplos de customização de MUI Treasury.

Max height menu

Se a altura de um menu impede que todos os itens de menu sejam exibidos, o menu terá internamente a opção de rolagem.

Limitações

Existe um problema com flexbox que impede text-overflow: ellipsis de funcionar em um leiaute flexível. Você pode usar o componente Typography com noWrap para solucionar esse problema:

Trocar transição

Use uma transição diferente.

<Button aria-controls="fade-menu" aria-haspopup="true" onClick={handleClick}>
  Open with fade transition
</Button>
<Menu
  id="fade-menu"
  anchorEl={anchorEl}
  keepMounted
  open={open}
  onClose={handleClose}
  TransitionComponent={Fade}
>
  <MenuItem onClick={handleClose}>Profile</MenuItem>
  <MenuItem onClick={handleClose}>My account</MenuItem>
  <MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>

Menu de contexto

Aqui está um exemplo de um menu de contexto. (Clique com o botão direito para abrir.)

Projetos Complementares

Para situações de uso mais avançadas, você pode tirar proveito com:

PopupState helper

Existe um pacote de terceiros material-ui-popup-state que cuida do estado do menu para você na maioria das situações.

<PopupState variant="popover" popupId="demo-popup-menu">
  {(popupState) => (
    <React.Fragment>
      <Button variant="contained" {...bindTrigger(popupState)}>
        Open Menu
      </Button>
      <Menu {...bindMenu(popupState)}>
        <MenuItem onClick={popupState.close}>Cake</MenuItem>
        <MenuItem onClick={popupState.close}>Death</MenuItem>
      </Menu>
    </React.Fragment>
  )}
</PopupState>

API

• <ClickAwayListener />
• <Menu />
• <MenuItem />
• <MenuList />
• <Popover />
• <Popper />