ContextMenu

Menu de contexto de clique direito com submenus aninhados e ícones.

Importação

import { ContextMenu } from 'asterui'

Exemplos

Menu de Contexto Básico

Clique com o botão direito no elemento para mostrar o menu.

</>

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

Padrão Orientado a Dados

Use a prop items para menus orientados a dados.

</>

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

Com Ícones

Itens de menu com ícones.

</>

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

Com Divisores

Separar seções do menu com 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

Submenu Aninhado

Itens de menu com submenus aninhados.

</>

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

Itens Desabilitados

Alguns itens do menu podem ser desabilitados.

</>

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

Propriedade	Descrição	Tipo	Padrão
children	Elemento que aciona o menu de contexto ao clicar com o botão direito	React.ReactNode	-
items	Itens do menu	ContextMenuItem[]	-
onSelect	Callback quando um item é selecionado	(key: string) => void	-
disabled	Se o menu de contexto está desabilitado	boolean	false
className	Classes CSS adicionais para o menu	string	-
data-testid	ID de teste para testes	string	-

ContextMenuItem (para prop items)

Propriedade	Descrição	Tipo	Padrão
key	Identificador único para o item	string	-
label	Rótulo de exibição	React.ReactNode	-
icon	Elemento de ícone	React.ReactNode	-
disabled	Estado desabilitado	boolean	false
danger	Mostrar como ação de perigo/destrutiva	boolean	false
divider	Renderizar como um divisor	boolean	false
children	Itens de submenu	ContextMenuItem[]	-
data-testid	ID de teste para testes	string	-

ContextMenu.Item (padrão composto)

Propriedade	Descrição	Tipo	Padrão
key	Chave única para o item (prop key do React)	string	-
children	Conteúdo do item	React.ReactNode	-
icon	Ícone para exibir antes do rótulo	React.ReactNode	-
disabled	Se o item está desabilitado	boolean	false
danger	Mostrar como ação de perigo/destrutiva	boolean	false
data-testid	ID de teste para testes	string	-

ContextMenu.SubMenu (padrão composto)

Propriedade	Descrição	Tipo	Padrão
key	Chave única para o submenu (prop key do React)	string	-
label	Rótulo do submenu	React.ReactNode	-
icon	Ícone para exibir antes do rótulo	React.ReactNode	-
disabled	Se o submenu está desabilitado	boolean	false
children	Itens do submenu	React.ReactNode	-
data-testid	ID de teste para testes	string	-

Acessibilidade

• Menu fecha ao pressionar a tecla Escape
• Menu fecha ao clicar fora
• Itens do menu são navegáveis por teclado
• Itens desabilitados são anunciados adequadamente