Menú del botón derecho

El menú de acciones que aparece donde la persona hizo clic. Es el mismo menú desplegable — la misma marcación, los mismos elementos, el mismo teclado —, solo que abierto con el botón derecho y anclado en el punto del clic. En una lista los elementos suelen cambiar según la fila: por eso items también acepta una función.

Haz clic con el botón derecho en una fila. Con el teclado, llega con Tab y pulsa la tecla de menú o Shift+F10.

Cliente	Vencimiento	Importe
Padaria Pão Quente	12/09/2026	12400
Oficina Duas Rodas	03/07/2026	3890.5
Marcenaria Horizonte	28/11/2026	760

Cómo se usa

El área es la que escucha el botón derecho; match dice qué parte de ella es el objetivo. El objetivo llega a items, y de ahí salen las acciones de esa fila.

new Tucano.ContextMenu('#contratos', {
  match: 'tbody tr',
  items: (row) => [
    { label: row.dataset.name },
    { text: 'Editar', shortcut: '⌘E', onClick: () => editar(row.dataset.id) },
    { text: 'Duplicar', onClick: () => duplicar(row.dataset.id) },
    { separator: true },
    { text: 'Eliminar', variant: 'danger', onClick: () => eliminar(row.dataset.id) },
  ],
});

Sin match, el objetivo es el área entera — el camino para una tarjeta o un panel con un solo menú. Fuera de un objetivo, el menú del navegador sigue apareciendo: un menú de acciones que no sabe sobre qué actúa es peor que ninguno.

El menú del navegador está a un Shift de distancia

Shift + botón derecho muestra el menú del propio navegador, en cualquier parte del área. Quien necesita "abrir en una pestaña nueva", el corrector ortográfico o inspeccionar la página no se queda sin ello — y eso no se le puede quitar a nadie.

Ejemplos

Área entera, sin `match`

Una tarjeta con las mismas acciones en cualquier punto.

Contrato 4821

Haz clic con el botón derecho en cualquier lugar de esta tarjeta.

Menú escrito en la plantilla

Cuando es el servidor quien sabe lo que la persona puede hacer, como en el desplegable.

Factura 118

El botón derecho aquí abre el menú de la plantilla.

&lt;table id="contratos" data-tuc-contextmenu="#acciones-fila" data-match="tbody tr"&gt;
  {% for obj in page_obj %}
    &lt;tr tabindex="0" data-id="{{ obj.pk }}"&gt;…&lt;/tr&gt;
  {% endfor %}
&lt;/table&gt;

&lt;div class="tuc-dropdown" id="acciones-fila" hidden&gt;
  &lt;button type="button" class="tuc-dropdown__item"&gt;
    &lt;span class="tuc-dropdown__text"&gt;Editar&lt;/span&gt;
  &lt;/button&gt;
&lt;/div&gt;

Con el panel de la plantilla los elementos son los mismos para toda fila: quien necesita saber cuál fue la clicada lee menu.target dentro del onclick, o usa items como función.

Teclado y accesibilidad

El panel es el del menú desplegable: role="menu", elementos como menuitem, foco dentro del menú y devuelto a quien lo tenía. Abierto con el botón derecho, ningún elemento nace destacado — como en el menú del sistema, la primera flecha es la que destaca el primero. Abierto con el teclado, el primero ya viene destacado, porque quien pulsó la tecla de menú ya quiere recorrerlos.

Tecla	Dónde	Acción
Tecla de menú, `Shift+F10`	Objetivo con foco	Abre el menú anclado en el objetivo
`↑` `↓`	Menú abierto	Recorre los elementos, dando la vuelta
`Home` `End`	Menú abierto	Primero y último elemento
`Enter` `Espacio`	Elemento	Lo elige y cierra
`Esc`	Menú abierto	Cierra y devuelve el foco
`Shift` + botón derecho	Área	Deja pasar el menú del navegador

El objetivo tiene que poder recibir el foco

La tecla de menú y Shift+F10 abren desde quien tiene el foco. En una tabla, pon tabindex="0" en las filas — sin eso, lo que solo existe en el menú del botón derecho queda fuera del alcance de quien no usa ratón. En el móvil, la pulsación larga abre el menú en Android; en el iPhone, Safari no avisa a la página, así que ninguna acción puede vivir solo aquí.

API

Generada a partir del código en cada build — si algo no está aquí, no existe.

Marcado

[data-tuc-contextmenu]

En JS

new Tucano.ContextMenu(alvo, opcoes)

Atributos

data-match data-placement data-tuc-contextmenu

Métodos

openAt close

Opciones

Las notas de esta tabla salen de los comentarios del código fuente, que están escritos en portugués.

Opción	Por defecto	Para qué
`placement`	`'bottom-start'`
`items`	`null`	array como o do Dropdown, ou (alvo) => array
`match`	`null`	seletor do alvo dentro da area; sem ele, a area inteira
`closeOnPick`	`true`
`onOpen`	`null`	(alvo, instancia) — para marcar a linha clicada, por exemplo
`panel`	`null`	painel ja escrito no template, no lugar de `items`