NavigationDisponible

Context Menu

Menú contextual que se abre con el puntero o el teclado.

Choose an action.

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/context-menu.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

import { useState } from 'react';
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuLabel,
  ContextMenuItem,
  ContextMenuSeparator,
} from '@/components/ui/context-menu';

export default function Demo() {
  const [action, setAction] = useState('Choose an action.');
  return (
    <div className="grid gap-4">
      <ContextMenu>
        <ContextMenuTrigger
          className="grid min-h-36 w-full place-items-center rounded-lg border-2 border-dashed border-ink p-6"
          render={<button type="button" aria-label="Document context menu" />}
        >
          Right click or use the context menu key
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuGroup>
            <ContextMenuLabel>Document</ContextMenuLabel>
            <ContextMenuItem onClick={() => setAction('Duplicate selected')}>
              Duplicate
            </ContextMenuItem>
            <ContextMenuItem onClick={() => setAction('Archive selected')}>
              Archive
            </ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuItem disabled>Move to team</ContextMenuItem>
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
      <output className="bl-type-small">{action}</output>
    </div>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Comprueba cerrado, abierto, opción resaltada, seleccionado y deshabilitado cuando el componente los admita.
Los diálogos y menús deben poder abrirse con teclado. Escape cierra los overlays no persistentes y devuelve el foco al disparador. Tooltip y Hover Card también deben mostrarse al enfocar.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
open	boolean	uncontrolled	Controls menu visibility.
onOpenChange	function	—	Reports open-state changes.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.