# ContextMenu

O menu do botão direito.

O conteúdo e o mesmo do `Menu`: use `MenuContent`, `MenuItem`, `MenuGroup` e
`MenuSeparator` dentro dele. Só o gatilho muda, porque aqui quem abre e a área
inteira, e não um botão.

**Nunca deixe uma ação existir só aqui.** Quem navega por teclado depende da
tecla de menu, que nem todo teclado tem, e num navegador de celular não ha botão
direito. Ele acelera o que já esta em outro lugar, no menu de ações da linha,
por exemplo.

No React Native o mesmo caso existe, e o gesto muda: o `Menu` do
`@rivocode/ui-native` abre no toque longo da área que você passar como
`children`. A seção do fim desta pagina diz como.

```tsx
<ContextMenu>
  <ContextMenuTrigger className="rounded-md border border-dashed p-6">
    Clique com o botao direito
  </ContextMenuTrigger>
  <MenuContent>
    <MenuItem>Baixar PDF</MenuItem>
    <MenuItem>Duplicar</MenuItem>
    <MenuSeparator />
    <MenuItem tone="danger">Cancelar nota</MenuItem>
  </MenuContent>
</ContextMenu>
```

## No React Native

Vira `Menu`, e não peça nova: o menu do botão direito é, no celular, o toque longo, e quem abre a folha de ações já é o `Menu`. Passe a área alvo como `children` dele — o que no web é o `ContextMenuTrigger` — e ela chama `onOpenChange(true)` no toque longo, com `triggerClassName` para o layout que os filhos exigem. Quem navega por leitor de tela entra pela mesma porta: a área expõe a ação `longpress`, que o VoiceOver e o TalkBack oferecem no menu de ações, então o gesto nunca é o único caminho.

## Importação

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

## Exemplos

### Na linha da tabela

```tsx
import { ContextMenu, ContextMenuTrigger, MenuContent, MenuItem, MenuSeparator } from '@rivocode/ui'

export function InATableRow() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-24 w-80 items-center justify-center rounded-md border border-dashed border-border text-base text-fg-muted">
        Clique com o botão direito
      </ContextMenuTrigger>
      <MenuContent>
        <MenuItem>Baixar PDF</MenuItem>
        <MenuItem>Duplicar</MenuItem>
        <MenuSeparator />
        <MenuItem tone="danger">Cancelar nota</MenuItem>
      </MenuContent>
    </ContextMenu>
  )
}
```

## 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. |
| `disabled` | `boolean` |  | 0.4.0 | Whether the component should ignore user interaction. |
| `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. |
| `onOpenChange` | `((open: boolean, eventDetails: ContextMenuRootChangeEventDetails) => 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. |

## Ver também

- [AlertDialog](/componentes/alert-dialog.md)
- [Dialog](/componentes/dialog.md)
- [Popconfirm](/componentes/popconfirm.md)
- [Popover](/componentes/popover.md)
- [PreviewCard](/componentes/preview-card.md)
- [Sheet](/componentes/sheet.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)