# Menu

Menu de ações, típico dos três pontinhos de uma linha de tabela.

Compõe com `MenuTrigger`, `MenuContent`, `MenuItem`, `MenuGroup` e
`MenuSeparator`. O título de grupo e a propriedade `label` do `MenuGroup`, não
uma peça separada.

O menu também escolhe, e não só age: `MenuCheckboxItem` liga e desliga uma opção
sem fechar o painel (o "quais colunas mostrar" de uma listagem), e
`MenuRadioGroup` com `MenuRadioItem` faz a escolha única, o "ordenar por". Os
dois trazem o `aria-checked` de item de menu e a navegação por seta e por
primeira letra, que um `Popover` com `Checkbox` dentro não tem.

Quando um ramo merece painel próprio, `MenuSubmenu` com `MenuSubmenuTrigger`
abre ao lado. E o item que navega é `MenuLinkItem`, que sai como `<a>` de
verdade.

`tone="danger"` no item que apaga. Renderiza em portal, então exige o
`RivoProvider`.

## No React Native

Traduz: o `@rivocode/ui-native` exporta `Menu` - folha de baixo com `actions`, nunca popup ancorado; `children` abre no toque longo. A API não é a mesma do web (no nativo tudo é controlado), e a [tabela de paridade](/react-native) diz o que muda peça a peça.

## Importação

```tsx
import { Menu } from '@rivocode/ui'
```

## Exemplos

### Ações da linha

```tsx
import { Columns3, Download, MoreHorizontal, SlidersHorizontal, Trash2 } from 'lucide-react'
import {
  Button,
  Menu,
  MenuCheckboxItem,
  MenuContent,
  MenuGroup,
  MenuItem,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuSubmenu,
  MenuSubmenuTrigger,
  MenuTrigger,
} from '@rivocode/ui'

export function RowActions() {
  return (
    <div className="min-h-64">
      <Menu defaultOpen>
        <MenuTrigger render={<Button variant="secondary" size="icon" aria-label="Mais ações" />}>
          <MoreHorizontal size={16} aria-hidden="true" />
        </MenuTrigger>
        <MenuContent>
          <MenuGroup label="Nota 4813">
            <MenuItem>
              <Download size={15} aria-hidden="true" />
              Baixar PDF
            </MenuItem>
            <MenuItem>Duplicar</MenuItem>
            <MenuItem>Enviar por email</MenuItem>
          </MenuGroup>
          <MenuSeparator />
          <MenuItem tone="danger">
            <Trash2 size={15} aria-hidden="true" />
            Cancelar nota
          </MenuItem>
        </MenuContent>
      </Menu>
    </div>
  )
}
```

### Fechado

```tsx
import { Columns3, Download, MoreHorizontal, SlidersHorizontal, Trash2 } from 'lucide-react'
import {
  Button,
  Menu,
  MenuCheckboxItem,
  MenuContent,
  MenuGroup,
  MenuItem,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuSubmenu,
  MenuSubmenuTrigger,
  MenuTrigger,
} from '@rivocode/ui'

export function ClosedState() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="secondary" size="sm" />}>Ações</MenuTrigger>
      <MenuContent>
        <MenuItem>Baixar PDF</MenuItem>
        <MenuItem>Duplicar</MenuItem>
      </MenuContent>
    </Menu>
  )
}
```

### Quais colunas mostrar

```tsx
import { Columns3, Download, MoreHorizontal, SlidersHorizontal, Trash2 } from 'lucide-react'
import {
  Button,
  Menu,
  MenuCheckboxItem,
  MenuContent,
  MenuGroup,
  MenuItem,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuSubmenu,
  MenuSubmenuTrigger,
  MenuTrigger,
} from '@rivocode/ui'

const COLUMNS = [
  { key: 'numero', label: 'Número' },
  { key: 'cliente', label: 'Cliente' },
  { key: 'emissao', label: 'Emissão' },
  { key: 'valor', label: 'Valor' },
]

export function ColumnPicker() {
  return (
    <div className="min-h-72">
      <Menu defaultOpen>
        <MenuTrigger render={<Button variant="secondary" size="sm" />}>
          <Columns3 size={15} aria-hidden="true" />
          Colunas
        </MenuTrigger>
        <MenuContent>
          <MenuGroup label="Mostrar na listagem">
            {COLUMNS.map((column) => (
```

### Ordenar por

```tsx
import { Columns3, Download, MoreHorizontal, SlidersHorizontal, Trash2 } from 'lucide-react'
import {
  Button,
  Menu,
  MenuCheckboxItem,
  MenuContent,
  MenuGroup,
  MenuItem,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuSubmenu,
  MenuSubmenuTrigger,
  MenuTrigger,
} from '@rivocode/ui'

export function SortChoice() {
  return (
    <div className="min-h-72">
      <Menu defaultOpen>
        <MenuTrigger render={<Button variant="secondary" size="sm" />}>
          <SlidersHorizontal size={15} aria-hidden="true" />
          Ordenar
        </MenuTrigger>
        <MenuContent>
          <MenuRadioGroup defaultValue="emissao" label="Ordenar por">
            {/* `closeOnClick` porque escolher a ordem encerra o assunto - na
                Base UI o padrao e o contrario, e o menu fica aberto. */}
            <MenuRadioItem value="emissao" closeOnClick>
              Data de emissão
            </MenuRadioItem>
            <MenuRadioItem value="valor" closeOnClick>
              Valor
            </MenuRadioItem>
            <MenuRadioItem value="cliente" closeOnClick>
              Cliente
            </MenuRadioItem>
          </MenuRadioGroup>
        </MenuContent>
      </Menu>
    </div>
  )
}
```

### Com submenu

```tsx
import { Columns3, Download, MoreHorizontal, SlidersHorizontal, Trash2 } from 'lucide-react'
import {
  Button,
  Menu,
  MenuCheckboxItem,
  MenuContent,
  MenuGroup,
  MenuItem,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuSubmenu,
  MenuSubmenuTrigger,
  MenuTrigger,
} from '@rivocode/ui'

export function WithSubmenu() {
  return (
    <div className="min-h-64">
      <Menu defaultOpen>
        <MenuTrigger render={<Button variant="secondary" size="sm" />}>Nota 4813</MenuTrigger>
        <MenuContent>
          <MenuItem>Duplicar</MenuItem>
          <MenuSubmenu>
            {/* O lado nao se pede: o ramo abre em `inline-end` sozinho, e vira
                para o outro lado quando nao cabe. */}
            <MenuSubmenuTrigger>Exportar</MenuSubmenuTrigger>
            <MenuContent>
              <MenuItem>XML da NF-e</MenuItem>
              <MenuItem>PDF do DANFE</MenuItem>
              <MenuItem>Planilha CSV</MenuItem>
            </MenuContent>
          </MenuSubmenu>
          <MenuSeparator />
          <MenuItem tone="danger">Cancelar nota</MenuItem>
        </MenuContent>
      </Menu>
    </div>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `actionsRef` | `RefObject<MenuRootActions \| null>` |  | 0.4.0 | A ref to imperative actions. |
| `closeParentOnEsc` | `boolean` |  | 0.4.0 | When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu. |
| `defaultOpen` | `boolean` |  | 0.4.0 | Whether the menu is initially open. |
| `defaultTriggerId` | `string \| null` |  | 0.4.0 | ID of the trigger that the menu is associated with. |
| `disabled` | `boolean` |  | 0.4.0 | Whether the component should ignore user interaction. |
| `handle` | `MenuHandle<Payload>` |  | 0.4.0 | A handle to associate the menu with a trigger. |
| `highlightItemOnHover` | `boolean` |  | 0.4.0 | Whether moving the pointer over items should highlight them. |
| `loopFocus` | `boolean` |  | 0.4.0 | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. |
| `modal` | `boolean` |  | 0.4.0 | Determines if the menu enters a modal state when open. |
| `onOpenChange` | `((open: boolean, eventDetails: MenuRootChangeEventDetails) => void)` |  | 0.4.0 | Event handler called when the menu is opened or closed. |
| `onOpenChangeComplete` | `((open: boolean) => void)` |  | 0.4.0 | Event handler called after any animations complete when the menu is opened or closed. |
| `open` | `boolean` |  | 0.4.0 | Whether the menu is currently open. |
| `orientation` | `MenuRootOrientation` |  | 0.4.0 | The visual orientation of the menu. |
| `triggerId` | `string \| null` |  | 0.4.0 | ID of the trigger that the menu is associated with. |

## Partes

O componente se monta com as peças abaixo. Todas vêm de `@rivocode/ui`.

### MenuCheckboxItem

Um item do menu que liga e desliga uma opção, sem fechar o menu.

É o menu de "Colunas" de uma listagem: quais colunas da tabela de notas
aparecem. Cada item guarda o próprio estado com `defaultChecked`, ou responde a
`checked` e `onCheckedChange` quando quem manda é a tela.

Marcar **não fecha** o menu (`closeOnClick` nasce `false`, como na Base UI),
porque quem escolhe colunas escolhe várias de uma vez.

```tsx
<MenuContent>
  <MenuGroup label="Mostrar na listagem">
    <MenuCheckboxItem defaultChecked disabled>Número</MenuCheckboxItem>
    <MenuCheckboxItem defaultChecked>Cliente</MenuCheckboxItem>
    <MenuCheckboxItem>Valor</MenuCheckboxItem>
  </MenuGroup>
</MenuContent>
```

## Partes

`classNames` alcança o `indicator`, que é a coluna da marca. Ela existe mesmo no
item desmarcado de propósito: o indicador da Base UI só monta quando o item está
ligado, e sem uma coluna fixa o texto de todas as linhas andava para o lado a
cada clique. A largura é a mesma do `SelectItem` e do `ComboboxItem`, para as
três listas alinharem o texto na mesma coluna.

## Quando não usar

Para uma escolha entre alternativas que se excluem (ordenar por data **ou** por
valor), use `MenuRadioItem` dentro de um `MenuRadioGroup`: o ponto diz que
escolher esta desescolhe a de cima, o que a marca de certo não diz.

E não troque por um `Checkbox` solto dentro de um `Popover`, que era o caminho
que sobrava antes desta peça. Ele custa as duas coisas que só o menu dá: o
`aria-checked` de item de menu, que é como o leitor de tela anuncia a linha, e a
navegação por seta e por primeira letra que a lista de menu já traz. Um `Popover`
é um painel com conteúdo qualquer; ninguém anda nele com o teclado como se anda
num menu.

Quando as opções são muitas e pedem busca, o menu não é o lugar: a lista com
campo de digitar é `Combobox` com `multiple`.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `checked` | `boolean` |  | - | Whether the checkbox item is currently ticked. |
| `classNames` | `Partial<Record<"indicator", string>>` |  | - | Classe por parte: `indicator`, a coluna que guarda a marca. |
| `closeOnClick` | `boolean` |  | - | Whether to close the menu when the item is clicked. |
| `defaultChecked` | `boolean` |  | - | Whether the checkbox item is initially ticked. |
| `disabled` | `boolean` |  | - | Whether the component should ignore user interaction. |
| `label` | `string` |  | - | Overrides the text label to use when the item is matched during keyboard text navigation. |
| `nativeButton` | `boolean` |  | - | Whether the component renders a native `<button>` element when replacing it via the `render` prop. |
| `onCheckedChange` | `((checked: boolean, eventDetails: MenuRootChangeEventDetails) => void)` |  | - | Event handler called when the checkbox item is ticked or unticked. |
| `onClick` | `((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)` |  | - | The click handler for the menu item. |
| `render` | `ComponentRenderFn<HTMLProps, MenuCheckboxItemState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |
| `tone` | `"danger" \| "neutral" \| null` |  | - |  |

### MenuContent

O painel flutuante do menu, com portal, posicionamento e a virada de lado
quando não cabe.

Usa a mesma casca visual do `SelectContent` e do `TooltipContent`: o que
flutua nesta biblioteca se parece de propósito. E se posiciona igual: `side`,
`align` e `sideOffset` significam a mesma coisa nas cinco, e abrem a 6px do
gatilho quando ninguém pede outra folga.

```tsx
<MenuContent side="top" align="end">
  <MenuItem>Baixar PDF</MenuItem>
</MenuContent>
```

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `align` | `Align` |  | - | Alinhamento no eixo do lado escolhido. |
| `finalFocus` | `boolean \| RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => void \| boolean \| HTMLElement \| null)` |  | 0.4.0 | Determines the element to focus when the menu is closed. |
| `render` | `ComponentRenderFn<HTMLProps, MenuPopupState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |
| `side` | `Side` |  | - | Lado preferido do gatilho. |
| `sideOffset` | `number \| OffsetFunction` |  | - | Distancia entre o gatilho e o painel, em pixels. |

### MenuGroup

Um grupo de itens com título.

O rótulo vem junto no `label` de propósito: a Base UI exige que ele viva dentro
de um grupo, e expor as duas peças separadas só criava uma forma de usar errado
que quebra na tela, não no teste de tipo.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `classNames` | `Partial<Record<"label", string>>` |  | - | Classe por parte: `label`, o titulo do grupo. |
| `label` | `string` |  | 0.4.0 | Titulo do grupo. |
| `render` | `ComponentRenderFn<HTMLProps, MenuGroupState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

### MenuItem

Uma ação do menu.

`tone="danger"` pinta o que destrói. Use só no que não tem volta, se tudo é
vermelho, nada é. Item desativado continua na lista, porque sumir com a opção
esconde que ela existe.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `closeOnClick` | `boolean` |  | 0.4.0 | Whether to close the menu when the item is clicked. |
| `disabled` | `boolean` |  | 0.4.0 | Whether the component should ignore user interaction. |
| `label` | `string` |  | 0.4.0 | Overrides the text label to use when the item is matched during keyboard text navigation. |
| `nativeButton` | `boolean` |  | 0.4.0 | Whether the component renders a native `<button>` element when replacing it via the `render` prop. |
| `onClick` | `((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)` |  | 0.4.0 | The click handler for the menu item. |
| `render` | `ComponentRenderFn<HTMLProps, MenuItemState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |
| `tone` | `"danger" \| "neutral" \| null` |  | 0.4.0 |  |

### MenuLinkItem

O item do menu que navega, e por isso sai como `<a>` de verdade.

É o "Meu perfil" do menu do avatar. O que se ganha é o que só a âncora tem: o
botão do meio abre em outra aba, o botão direito copia o endereço, e a barra do
navegador mostra para onde o item leva antes do clique.

```tsx
<MenuContent>
  <MenuLinkItem href="/perfil">Meu perfil</MenuLinkItem>
  <MenuLinkItem render={<Link to="/assinatura" />}>Assinatura</MenuLinkItem>
</MenuContent>
```

Com roteador de uma página só, passe o componente de link dele em `render`: o
elemento é seu, e a peça só empresta a pele e o comportamento de menu.

**`closeOnClick` nasce `true` aqui, e na Base UI nasce `false`.** O motivo é a
navegação pelo cliente: sem recarregar a página ninguém desmonta o menu, e ele
ficava aberto flutuando sobre a tela nova. Quem quiser o comportamento da Base UI
passa `closeOnClick={false}`.

## Quando não usar

Para o que acontece na mesma tela (duplicar, exportar, cancelar), use
`MenuItem`. Âncora que não leva a lugar nenhum (`href="#"` com `onClick`) engana
as três affordances acima, e é pior do que um item comum.

Um menu inteiro de links é um menu de navegação, e não de ações: aí a peça é
`NavigationMenu`, ou a `Sidebar` quando os destinos são as seções do painel.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `closeOnClick` | `boolean` |  | - | Whether to close the menu when the item is clicked. |
| `label` | `string` |  | - | Overrides the text label to use when the item is matched during keyboard text navigation. |
| `render` | `ComponentRenderFn<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, MenuLinkItemState> \| ReactElement<...>` |  | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

### MenuRadioGroup

O grupo de escolha única dentro do menu, e quem guarda o valor escolhido.

É o "Ordenar por" de uma listagem: uma ordem de cada vez. O valor vive aqui, e
não em cada item: `defaultValue` para deixar com a peça, `value` mais
`onValueChange` para deixar com a tela.

O título vem no `label`, pelo mesmo motivo do `MenuGroup`: a Base UI liga o
`aria-labelledby` do grupo ao título que mora dentro dele, e um título escrito
por fora não nomeia grupo nenhum (falha que não quebra tipo, só o anúncio).

```tsx
<MenuRadioGroup defaultValue="emissao" label="Ordenar por">
  <MenuRadioItem value="emissao" closeOnClick>Data de emissão</MenuRadioItem>
  <MenuRadioItem value="valor" closeOnClick>Valor</MenuRadioItem>
</MenuRadioGroup>
```

## Partes

`classNames` alcança o `label`, o mesmo título que o `MenuGroup` escreve.

## Quando não usar

Para opções que se acumulam (quais colunas mostrar, quais situações incluir no
filtro), use `MenuCheckboxItem`: lá cada linha é independente, aqui uma linha
apaga a anterior.

Se as opções cabem na tela e comparar entre elas importa, o menu esconde o que
deveria estar à vista: `RadioGroup` mostra todas de uma vez, e `ToggleGroup`
resolve as duas ou três que viram botão. O menu é para quando a escolha não
merece ocupar espaço permanente na barra.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `classNames` | `Partial<Record<"label", string>>` |  | - | Classe por parte: `label`, o titulo do grupo. |
| `defaultValue` | `any` |  | - | The uncontrolled value of the radio item that should be initially selected. |
| `disabled` | `boolean` |  | - | Whether the component should ignore user interaction. |
| `label` | `string` |  | - | Titulo do grupo: "Ordenar por". |
| `onValueChange` | `((value: any, eventDetails: MenuRootChangeEventDetails) => void)` |  | - | Function called when the selected value changes. |
| `render` | `ComponentRenderFn<HTMLProps, MenuRadioGroupState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |
| `value` | `any` |  | - | The controlled value of the radio item that should be currently selected. |

### MenuRadioItem

Uma opção de escolha única no menu: "por data de emissão", "por valor".

Sempre dentro de um `MenuRadioGroup`, que é quem guarda o valor. O `value` é
obrigatório: é ele que o grupo compara para saber qual linha está escolhida.

O ponto no lugar da marca de certo não é decoração: ele diz que escolher esta
desescolhe a de cima.

Como na Base UI, escolher **não** fecha o menu. Quando a escolha encerra o
assunto, e ordenar costuma encerrar, passe `closeOnClick`.

## Partes

`classNames` alcança o `indicator`, a coluna que guarda o ponto (a mesma
largura do `MenuCheckboxItem`, para os dois alinharem o texto quando aparecem no
mesmo painel).

## Quando não usar

Para ligar e desligar cada opção por conta, use `MenuCheckboxItem`.

Para uma ação que acontece e acaba (baixar o PDF, cancelar a nota), use
`MenuItem`: `aria-checked` num item que não guarda estado nenhum diz ao leitor de
tela que há uma escolha marcada onde não há.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `value` | `any` | sim | - | Value of the radio item. |
| `classNames` | `Partial<Record<"indicator", string>>` |  | - | Classe por parte: `indicator`, a coluna que guarda o ponto. |
| `closeOnClick` | `boolean` |  | - | Whether to close the menu when the item is clicked. |
| `disabled` | `boolean` |  | - | Whether the component should ignore user interaction. |
| `label` | `string` |  | - | Overrides the text label to use when the item is matched during keyboard text navigation. |
| `nativeButton` | `boolean` |  | - | Whether the component renders a native `<button>` element when replacing it via the `render` prop. |
| `onClick` | `((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)` |  | - | The click handler for the menu item. |
| `render` | `ComponentRenderFn<HTMLProps, MenuRadioItemState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |
| `tone` | `"danger" \| "neutral" \| null` |  | - |  |

### MenuSeparator

A linha entre grupos de ação.

Separa o que muda a tela do que muda o dado, e o comum do destrutivo. Duas
separações seguidas viram enfeite.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `orientation` | `Orientation` |  | 0.4.0 | The orientation of the separator. |
| `render` | `ComponentRenderFn<HTMLProps, SeparatorState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

### MenuSubmenu

Um ramo do menu, que abre ao lado.

Não pinta elemento nenhum: é só estado. Dentro dele vão o `MenuSubmenuTrigger`,
que é o item que abre o ramo, e um `MenuContent`, que é o mesmo painel do menu
de cima.

O lado não precisa ser pedido. A Base UI abre o ramo em `inline-end` quando o
pai é um menu, e vira para o outro lado sozinha quando não cabe. Passar `side`
aqui é para quem tem motivo, não obrigação.

```tsx
<MenuContent>
  <MenuItem>Duplicar</MenuItem>
  <MenuSubmenu>
    <MenuSubmenuTrigger>Exportar</MenuSubmenuTrigger>
    <MenuContent>
      <MenuItem>XML da NF-e</MenuItem>
      <MenuItem>PDF do DANFE</MenuItem>
    </MenuContent>
  </MenuSubmenu>
</MenuContent>
```

O `MenuSubmenuTrigger` traz a seta que avisa que há mais adiante, e `classNames`
alcança ela pelo nome `indicator`. O item fica aceso enquanto o ramo está
aberto: sem isso o realce sai assim que o ponteiro entra no painel filho, e nada
mais liga um ao outro.

## Quando não usar

Um nível resolve quase tudo. Dois já é uma árvore, e árvore com o mouse em cima
é como andar na diagonal sem perder a linha: quem escorrega fecha o ramo inteiro
e recomeça. Passando disso, `Dialog` ou uma tela própria custam menos a quem usa.

Para o menu que abre no botão direito sobre uma área, o gatilho é outro:
`ContextMenu`. E para a navegação principal do site, com painéis largos e links,
é `NavigationMenu`: o submenu daqui é uma lista de ações, e não um mapa de
seções.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `actionsRef` | `RefObject<MenuRootActions \| null>` |  | - | A ref to imperative actions. |
| `closeParentOnEsc` | `boolean` |  | - | When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu. |
| `defaultOpen` | `boolean` |  | - | Whether the menu is initially open. |
| `disabled` | `boolean` |  | - | Whether the component should ignore user interaction. |
| `highlightItemOnHover` | `boolean` |  | - | Whether moving the pointer over items should highlight them. |
| `loopFocus` | `boolean` |  | - | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. |
| `onOpenChange` | `((open: boolean, eventDetails: MenuRootChangeEventDetails) => void)` |  | - | Event handler called when the menu is opened or closed. |
| `onOpenChangeComplete` | `((open: boolean) => void)` |  | - | Event handler called after any animations complete when the menu is opened or closed. |
| `open` | `boolean` |  | - | Whether the menu is currently open. |
| `orientation` | `MenuRootOrientation` |  | - | The visual orientation of the menu. |

### MenuTrigger

O que abre o menu.

Sem estilo próprio de propósito: quase sempre ele envolve um `Button` por
`render`, e um estilo aqui brigaria com o do botão.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `closeDelay` | `number` |  | 0.4.0 | How long to wait before closing the menu that was opened on hover. |
| `delay` | `number` |  | 0.4.0 | How long to wait before the menu may be opened on hover. |
| `disabled` | `boolean` |  | 0.4.0 | Whether the component should ignore user interaction. |
| `handle` | `MenuHandle<unknown>` |  | 0.4.0 | A handle to associate the trigger with a menu. |
| `nativeButton` | `boolean` |  | 0.4.0 | Whether the component renders a native `<button>` element when replacing it via the `render` prop. |
| `openOnHover` | `boolean` |  | 0.4.0 | Whether the menu should also open when the trigger is hovered. |
| `payload` | `unknown` |  | 0.4.0 | A payload to pass to the menu when it is opened. |
| `render` | `ComponentRenderFn<HTMLProps, MenuTriggerState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

## Ver também

- [Breadcrumb](/componentes/breadcrumb.md)
- [Command](/componentes/command.md)
- [Menubar](/componentes/menubar.md)
- [NavigationMenu](/componentes/navigation-menu.md)
- [Pagination](/componentes/pagination.md)
- [Sidebar](/componentes/sidebar.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)