ContextMenu

Menú contextual de clic derecho con submenús anidados e iconos.

Importar

import { ContextMenu } from 'asterui'

Ejemplos

Menú Contextual Básico

Haz clic derecho en el elemento para mostrar el menú.

</>

Right-click here

import { ContextMenu, notification } from 'asterui'

function App() {
  return (
      <ContextMenu onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click here
        </div>
        <ContextMenu.Item key="copy">Copy</ContextMenu.Item>
        <ContextMenu.Item key="paste">Paste</ContextMenu.Item>
        <ContextMenu.Item key="cut">Cut</ContextMenu.Item>
      </ContextMenu>
    )
}

export default App

Patrón Basado en Datos

Usa la prop items para menús basados en datos.

</>

Right-click here

import { ContextMenu, notification } from 'asterui'

function App() {
  const items = [
    { key: 'copy', label: 'Copy' },
    { key: 'paste', label: 'Paste' },
    { key: 'cut', label: 'Cut' },
  ]
  
  return (
      <ContextMenu items={items} onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click here
        </div>
      </ContextMenu>
    )
}

export default App

Con Iconos

Elementos de menú con iconos.

</>

Right-click for options

import { ContextMenu, notification } from 'asterui'

function App() {
  const items = [
    { key: 'edit', label: 'Edit', icon: <span>✏️</span> },
    { key: 'duplicate', label: 'Duplicate', icon: <span>📋</span> },
    { key: 'delete', label: 'Delete', icon: <span>🗑️</span>, danger: true },
  ]
  
  return (
      <ContextMenu items={items} onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click for options
        </div>
      </ContextMenu>
    )
}

export default App

Con Divisores

Separa secciones del menú con divisores.

</>

Right-click for menu with sections

import { ContextMenu, notification } from 'asterui'

function App() {
  const items = [
    { key: 'undo', label: 'Undo' },
    { key: 'redo', label: 'Redo' },
    { key: 'divider1', divider: true },
    { key: 'cut', label: 'Cut' },
    { key: 'copy', label: 'Copy' },
    { key: 'paste', label: 'Paste' },
    { key: 'divider2', divider: true },
    { key: 'select-all', label: 'Select All' },
  ]
  
  return (
      <ContextMenu items={items} onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click for menu with sections
        </div>
      </ContextMenu>
    )
}

export default App

Submenú Anidado

Elementos de menú con submenús anidados.

</>

Right-click for nested menu

import { ContextMenu, notification } from 'asterui'

function App() {
  const items = [
    { key: 'new', label: 'New', children: [
      { key: 'new-file', label: 'File' },
      { key: 'new-folder', label: 'Folder' },
      { key: 'new-project', label: 'Project' },
    ]},
    { key: 'open', label: 'Open' },
    { key: 'save', label: 'Save' },
    { key: 'divider', divider: true },
    { key: 'export', label: 'Export', children: [
      { key: 'export-pdf', label: 'PDF' },
      { key: 'export-png', label: 'PNG' },
      { key: 'export-svg', label: 'SVG' },
    ]},
  ]
  
  return (
      <ContextMenu items={items} onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click for nested menu
        </div>
      </ContextMenu>
    )
}

export default App

Elementos Deshabilitados

Algunos elementos del menú pueden ser deshabilitados.

</>

Right-click (some items disabled)

import { ContextMenu, notification } from 'asterui'

function App() {
  const items = [
    { key: 'copy', label: 'Copy' },
    { key: 'paste', label: 'Paste', disabled: true },
    { key: 'cut', label: 'Cut' },
    { key: 'delete', label: 'Delete', danger: true, disabled: true },
  ]
  
  return (
      <ContextMenu items={items} onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click (some items disabled)
        </div>
      </ContextMenu>
    )
}

export default App

API

ContextMenu

Propiedad	Descripción	Tipo	Predeterminado
children	Elemento que activa el menú contextual al hacer clic derecho	React.ReactNode	-
items	Elementos del menú	ContextMenuItem[]	-
onSelect	Callback cuando se selecciona un elemento	(key: string) => void	-
disabled	Si el menú contextual está deshabilitado	boolean	false
className	Clases CSS adicionales para el menú	string	-
data-testid	ID de prueba para pruebas	string	-

ContextMenuItem (para prop items)

Propiedad	Descripción	Tipo	Predeterminado
key	Identificador único para el elemento	string	-
label	Etiqueta de visualización	React.ReactNode	-
icon	Elemento de icono	React.ReactNode	-
disabled	Estado deshabilitado	boolean	false
danger	Mostrar como acción peligrosa/destructiva	boolean	false
divider	Renderizar como divisor	boolean	false
children	Elementos de submenú	ContextMenuItem[]	-
data-testid	ID de prueba para pruebas	string	-

ContextMenu.Item (patrón compuesto)

Propiedad	Descripción	Tipo	Predeterminado
key	Clave única para el elemento (prop key de React)	string	-
children	Contenido del elemento	React.ReactNode	-
icon	Icono a mostrar antes de la etiqueta	React.ReactNode	-
disabled	Si el elemento está deshabilitado	boolean	false
danger	Mostrar como acción peligrosa/destructiva	boolean	false
data-testid	ID de prueba para pruebas	string	-

ContextMenu.SubMenu (patrón compuesto)

Propiedad	Descripción	Tipo	Predeterminado
key	Clave única para el submenú (prop key de React)	string	-
label	Etiqueta del submenú	React.ReactNode	-
icon	Icono a mostrar antes de la etiqueta	React.ReactNode	-
disabled	Si el submenú está deshabilitado	boolean	false
children	Elementos del submenú	React.ReactNode	-
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• El menú se cierra al presionar la tecla Escape
• El menú se cierra al hacer clic fuera
• Los elementos del menú son navegables por teclado
• Los elementos deshabilitados se anuncian correctamente