Todos los componentes (204)

Menú contextual

Acciones · ContextMenu

Qué es y cuándo usarlo

El menú del clic derecho: una zona que, al pulsarla con el botón secundario, abre una lista de acciones justo en el puntero. Mismas acciones, secciones, submenús y teclado que ActionMenu.

Cuándo usarlo

Filas de una tabla, ficheros, tarjetas: atajos a lo que ya se puede hacer por otro camino.
Siempre junto a una vía visible (un ActionMenu de tres puntos): el clic derecho no se descubre solo y en el móvil no existe en todos los sistemas.

Cuándo no

Como único acceso a una acción importante.

Teclado: la tecla de menú o Mayús+F10 lo abre junto al elemento enfocado, con el foco en la primera acción. Flechas, Inicio, Fin y escritura para moverse; Escape cierra y devuelve el foco.

Accesibilidad: es un role="menu" con el nombre de label. Con disabled el navegador enseña su menú de siempre.

Cómo se ve

Pulsa aquí con el botón derecho

Todavía no has elegido nada.

<ContextMenu
  label="Acciones del fichero"
  onSelect={alElegir}
  actions={[
    { key: 'abrir', label: 'Abrir', detail: '⏎' },
    { key: 'compartir', label: 'Compartir', children: [{ key: 'enlace', label: 'Copiar enlace' }] },
    { key: 'borrar', label: 'Eliminar', destructive: true, separatedBefore: true },
  ]}
>
  <Card title="informe-trimestral.pdf">Pulsa aquí con el botón derecho</Card>
</ContextMenu>

Props

Se importa con import { ContextMenu } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	La zona que responde al clic derecho (o a la tecla de menu / Mayus+F10).
`label`obligatoria	`string`	Lo que se anuncia al abrir. "Acciones de la factura F-2026-0007", no "Menú".
`onSelect`obligatoria	`(key: string) => void`	—
`actions`	`readonly MenuAction[]`	Lista plana de acciones. Para agrupar con títulos, usa `sections`.
`className`	`string`	Clase de la zona, para colocarla.
`disabled`	`boolean`	Sin menu: el navegador enseña el suyo de siempre.
`disabledKeys`	`readonly string[]`	Claves deshabilitadas de golpe, sin tocar la lista de acciones.
`minWidth`	`string`	Ancho mínimo del panel, para que no baile entre estados.
`onOpenChange`	`(open: boolean) => void`	—
`sections`	`readonly MenuSection[]`	Grupos con título: "Exportar", "Zona peligrosa".

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech:

Interactivo