Saltar al contenido principal

Context Menu

Un menú de clic derecho con acciones, atajos y navegación por teclado.

1'use client';
2

3import {
4  CopyIcon,
5  Delete02Icon,
6  Download01Icon,
7  PencilEdit01Icon,
8  Share01Icon,
9} from '@hugeicons/core-free-icons';
10import { HugeiconsIcon } from '@hugeicons/react';
11import { ContextMenu } from '@/components/ui/context-menu';
12

13export function Default() {
14  return (
15    <ContextMenu className="w-full max-w-md">
16      <ContextMenu.Trigger className="border-border bg-hatch text-muted-foreground flex h-48 w-full items-center justify-center rounded-xl border text-sm">
17        Right click here
18      </ContextMenu.Trigger>
19      <ContextMenu.Content>
20        <ContextMenu.Label>report-q3.pdf</ContextMenu.Label>
21        <ContextMenu.Separator />
22        <ContextMenu.Item>
23          <HugeiconsIcon icon={PencilEdit01Icon} size={16} />
24          Rename
25          <ContextMenu.Shortcut>F2</ContextMenu.Shortcut>
26        </ContextMenu.Item>
27        <ContextMenu.Item>
28          <HugeiconsIcon icon={CopyIcon} size={16} />
29          Copy
30          <ContextMenu.Shortcut>Ctrl C</ContextMenu.Shortcut>
31        </ContextMenu.Item>
32        <ContextMenu.Item>
33          <HugeiconsIcon icon={Download01Icon} size={16} />
34          Download
35        </ContextMenu.Item>
36        <ContextMenu.Item disabled>
37          <HugeiconsIcon icon={Share01Icon} size={16} />
38          Share
39        </ContextMenu.Item>
40        <ContextMenu.Separator />
41        <ContextMenu.Item variant="destructive">
42          <HugeiconsIcon icon={Delete02Icon} size={16} />
43          Delete
44          <ContextMenu.Shortcut>Del</ContextMenu.Shortcut>
45        </ContextMenu.Item>
46      </ContextMenu.Content>
47    </ContextMenu>
48  );
49}

Instalación

pnpm dlx nachui add context-menu

Anatomía

1import { ContextMenu } from '@/components/ui/context-menu';
1<ContextMenu>
2  <ContextMenu.Trigger>Haz clic derecho aquí</ContextMenu.Trigger>
3  <ContextMenu.Content>
4    <ContextMenu.Label>Acciones</ContextMenu.Label>
5    <ContextMenu.Separator />
6    <ContextMenu.Item>
7      Copiar
8      <ContextMenu.Shortcut>Ctrl C</ContextMenu.Shortcut>
9    </ContextMenu.Item>
10    <ContextMenu.Item variant="destructive">Eliminar</ContextMenu.Item>
11  </ContextMenu.Content>
12</ContextMenu>
El menú se abre en el puntero con clic derecho, con pulsación larga en pantallas táctiles, y desde el teclado con Shift F10 o la tecla de menú contextual. Se ajusta solo al viewport, y las flechas, Home, End y Escape funcionan como en cualquier menú.

Composición

Usa la siguiente composición para construir un ContextMenu:
ContextMenu
├── ContextMenu.Trigger
└── ContextMenu.Content
    ├── ContextMenu.Label
    ├── ContextMenu.Item
    │   └── ContextMenu.Shortcut
    └── ContextMenu.Separator

Referencia de API

ContextMenu

PropTypeDefaultDescription
onOpenChange(open: boolean) => void-Callback cuando cambia el estado abierto
classNamestring-Clases CSS adicionales

ContextMenu.Trigger

PropTypeDefaultDescription
disabledbooleanfalseIgnora el clic derecho y la pulsación larga
classNamestring-Clases CSS adicionales

ContextMenu.Item

PropTypeDefaultDescription
disabledbooleanfalseDeshabilita el elemento
variant'default' | 'destructive''default'Estilo visual
onSelect() => void-Callback al seleccionar
classNamestring-Clases CSS adicionales

ContextMenu.Label

PropTypeDefaultDescription
childrenReactNode-Texto de etiqueta

ContextMenu.Shortcut

Pista alineada a la derecha dentro de un elemento. Es solo visual, no registra el atajo.

ContextMenu.Separator

Separador visual entre elementos del menú. Sin props.
¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue
AnteriorCommand
SiguienteDialog
Ctrl+I