DropdownMenu

O Dropdown menu é usado para apresentar uma lista de links ou de ações imediatas para o contexto atual.

API

Showcase

Migração

Utilização

Playground

() => {
  const [open, setOpen] = useState(false);

  const menuItems = [
    { label: 'Option 1', onClick: () => console.log('option 1') },
    { label: 'Option 2', onClick: () => console.log('option 2') },
    { label: 'Option 3', onClick: () => console.log('option 3') },
  ];

  return (
    <DropdownMenu
      menuItems={menuItems}
      open={open}
      onDismiss={() => setOpen(false)}
    >
      <ActionButton onClick={() => setOpen(!open)}>
        <MenuIcon />
      </ActionButton>
    </DropdownMenu>
  );
}

() => {
  const [open, setOpen] = useState(false);

  const menuItems = [
    { label: 'Option 1', onClick: () => console.log('option 1') },
    { label: 'Option 2', onClick: () => console.log('option 2') },
    { label: 'Option 3', onClick: () => console.log('option 3') },
  ];

  return (
    <DropdownMenu
      menuItems={menuItems}
      open={open}
      onDismiss={() => setOpen(false)}
    >
      <ActionButton onClick={() => setOpen(!open)}>
        <MenuIcon />
      </ActionButton>
    </DropdownMenu>
  );
}

Propriedades DropdownMenu

Nome (* = obrigatório)	Tipo	Valores	Descrição
children *	JSX.Element	`—`	O elemento de referência ao qual o DropdownMenu fará referência. O Menu aparece posicionado a partir deste elemento.
open *	boolean	`false` (default) `true`	Se o dropdown menu está ou não aberto.
menuItems *	Array<MenuItem>	`[]`	Se o dropdown menu está ou não aberto.
dismissOnItemClick	boolean	`false` (default) `true`	Se o onDismiss deve ser invocado quando um item da lista é selecionado.
placement	DropdownMenuPlacement	`top-start` `right-start` `bottom-start` (default) `left-start`	O local do DropdownMenu relativo ao seu elemento de referência (children).
offset	0 \| SpacingToken	`0` (default) `base` `base02` `base03` `base04` `base05` `base06` `base07` `base08` `base10` `base12` `base15`	A distância entre o DropdownMenu e seu elementp de referência. Por padrão não deve haver distância, mas esse valor pode ser customizado para contextos específicos.

Propriedades MenuItem

Nome (* = obrigatório)	Tipo	Valores	Descrição
label *	string	`-`	O texto da label do item de menu.
icon	ReactNode	`-`	Ícone de suporte à label do item de menu.
onClick	() => void	`-`	Método invocado quando um item de menu é selecionado.
href	string	`-`	Quando provido, o item de menu será uma âncora. O hyperlink é ativado quando o item de menu é selecionado.
disabled	boolean	`false` (default) `true`	Desabilita o item de menu. É aplicado o estado de desabilitado e cliques não são processados.
asPortal	boolean	`false` `true` (default)	Define se o componente será criado com um Portal, fora do nó principal da aplicação e dentro do `body`

Métodos

Nome (* = obrigatório)	Tipo	Descrição
onDismiss	function	Função invocada quando o DropdownMenu é dispensado por comportamentos padrão de interação. Ela é invocada quando a pessoa: - Aperta a tecla ESC; - Clica em qualquer lugar da tela fora do DropdownMenu; - Realiza scroll em algum elemento ancestral ao DropdownMenu.