ContextMenu

Menú que aparece al hacer click derecho sobre un elemento.

---

Import

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuLabel,
  ContextMenuShortcut,
  ContextMenuCheckboxItem,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSub,
  ContextMenuSubTrigger,
  ContextMenuSubContent,
} from '@imansi/ui';

---

Uso básico

<ContextMenu>
  <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed">
    Click derecho acá
  </ContextMenuTrigger>
  <ContextMenuContent className="w-64">
    <ContextMenuItem>Copiar</ContextMenuItem>
    <ContextMenuItem>Pegar</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem variant="destructive">Eliminar</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

---

Con atajos

<ContextMenuContent>
  <ContextMenuItem>
    Guardar
    <ContextMenuShortcut>⌘S</ContextMenuShortcut>
  </ContextMenuItem>
  <ContextMenuItem>
    Copiar
    <ContextMenuShortcut>⌘C</ContextMenuShortcut>
  </ContextMenuItem>
</ContextMenuContent>

---

Con submenú

<ContextMenuSub>
  <ContextMenuSubTrigger>Compartir</ContextMenuSubTrigger>
  <ContextMenuSubContent>
    <ContextMenuItem>Email</ContextMenuItem>
    <ContextMenuItem>WhatsApp</ContextMenuItem>
  </ContextMenuSubContent>
</ContextMenuSub>

---

Props

Mismas convenciones que DropdownMenu. El trigger es el elemento que recibe el click derecho.

---

Accesibilidad

• También se abre con Shift + F10 o Tecla de menú contextual
• Navegable con Flechas
• Escape cierra