Vox Mente
Navegação

Componentes

Context Menu

beta

Ações no botão direito. Em toque não existe botão direito, então nada pode viver só aqui.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/context-menu

Playground
Clique com o botão direito aqui
<ContextMenu>
  <ContextMenuTrigger>Clique com o botão direito aqui</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Renomear turma</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Uso

Menu que abre no botão direito, sobre o elemento clicado. É atalho para quem já sabe onde clicar — nunca o único caminho para uma ação.
Clique com o botão direito aqui

Anatomia

Gatilho, conteúdo, rótulo, item e separador. `ContextMenuShortcut` mostra o atalho de teclado equivalente — porque a ação também existe fora do menu.
Clique com o botão direito aqui

Checkbox e radio

`ContextMenuCheckboxItem` alterna um estado; `ContextMenuRadioGroup` escolhe entre opções exclusivas. Os dois marcam a seleção com o mesmo ícone de check.
Clique com o botão direito aqui

Quando não usar

Context menu depende de botão direito — em toque não existe. Toda ação que estiver só aqui é inacessível em tablet e celular.
Se a ação precisa estar disponível para quem usa toque, coloque-a também num DropdownMenu visível na tela — um botão de três pontos no card da turma, por exemplo. O context menu complementa esse botão para quem já sabe que ele existe; ele não substitui.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

ContextMenuCheckboxItem

PropTipoPadrão
insetboolean—

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

ContextMenuItem

PropTipoPadrão
insetboolean—
variant"default" | "destructive""default"

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

ContextMenuLabel

PropTipoPadrão
insetboolean—

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

ContextMenuRadioItem

PropTipoPadrão
insetboolean—

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

ContextMenuSubTrigger

PropTipoPadrão
insetboolean—

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuTrigger não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css