Navegación

ContextMenu

Un menú que se abre donde se hace clic derecho, se mantiene presionado o se presiona Shift+F10.

import { ContextMenu } from '@alea/ui';

Ejemplos

Menú de clic derecho

Clic derecho, mantener presionado, o enfoca la tarjeta y presiona Shift+F10.

palette.json

Last action: nothing yet

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Color

--alea-focus…

Radius

--alea-radius-md…

Props

`ContextMenu` props

Un menú que se abre donde se hace clic derecho; Shift+F10 o la tecla Menú lo abren desde el teclado.

Prop	Tipo	Por defecto	Descripción
`areaLabel`obligatoria	`string`	-	Nombre del área, para que se sepa que tiene un menú ("Vista previa del archivo").
`children`obligatoria	`ReactNode`	-	El área donde se hace clic derecho (o se mantiene presionado, o Shift+F10 con foco).
`items`obligatoria	`MenuEntry[]`	-	Las entradas del menú: id, label, icon, shortcut, tone, o { separator: true }.
`aria-label`	`string`	-	Nombre del menú. Por defecto "Menú contextual".
`className`	`string`	-	Clases extra para el elemento raíz.
`motion`	`MotionProp`	-	Cómo entra y sale el popup: un preset (fade, scale, pop, slide-down, blur...), false para ninguno, u opciones.
`onAction`	`((id: Key) => void)`	-	Se llama con el id de la entrada elegida.

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Estados: Keyboard focus
Motion: Acepta una prop motion para su entrada y salida.
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-context-area.alea-context-anchor.alea-menu-popover.alea-menu

El área recibe foco y dice que tiene un menú; Shift+F10 y la tecla Menú lo abren.
Cada acción también debe poder hacerse de otra forma.

Teclado

Tecla	Acción
`Shift+F10` o `Tecla Menú`	Abre
`Flechas`	Se mueven
`Enter`	Ejecuta
`Escape`	Cierra y devuelve el foco

Qué hacer y qué evitar

Hacer

Pon las mismas acciones en algún lugar visible también (una barra de herramientas o un botón de menú).
Muestra los atajos junto a las acciones.

Evitar

No escondas acciones destructivas solo en un menú contextual.
No reemplaces el menú contextual del navegador sobre texto que la gente quiera copiar.