Pharos
Navegar componentes
← Componentes

ContextMenu

ContextMenuExemplo
Um menu de contexto acionado por clique direito que aparece na posição do cursor. Use para fornecer ações contextuais para elementos ou regiões específicas sem poluir a UI com botões visíveis.
Importação
import {ContextMenu} from '@pharos-ds/core/ContextMenu';

Exemplos

Área interativa

size
isDisabled
Clique com o botão direito aqui
Código
import {ContextMenu} from '@pharos-ds/core/ContextMenu';

<ContextMenu
  size="md"
  isDisabled={false}
 />

Boas práticas

  • Faça: Mantenha itens de menu concisos e orientados à ação; usuários esperam acesso rápido a ações contextuais.
  • Faça: Use sections e dividers para agrupar ações relacionadas quando o menu tiver muitos itens.
  • Faça: Garanta que todas as ações do menu de contexto também estejam acessíveis via outros elementos de UI para usuários apenas de teclado.
  • Evite: Use um ContextMenu como única forma de acessar ações importantes; nem todos os usuários sabem clicar com o botão direito.
  • Evite: Coloque mais de 10–12 itens em um único menu sem agrupá-los em sections.

Props

PropTipoPadrãoDescrição
children *ReactNode—A área trigger: clique direito neste conteúdo para abrir o menu.
items *ContextMenuOption[]—Array de entradas de menu. Cada entrada é um de: um item de ação `{label, onClick?, icon?, isDisabled?}`, um divider `{type: "divider"}`, ou uma section `{type: "section", title?, items: [...action items]}`.
menuContentReactNode—Conteúdo JSX de menu customizado para modo compound. Use em vez de items para menus dinâmicos ou com estado.
menuWidthnumber | string'160px'Largura customizada do menu.
size'sm' | 'md' | 'lg''md'Tamanho dos itens de menu: controla a densidade de padding.
labelstring'Context menu'Nome acessível para a superfície do menu, anunciado quando abre.
isDisabledbooleanfalseQuando true, clique direito exibe o menu de contexto nativo do browser.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/ContextMenu
ContextMenu · Pharos