Context Menu

Overlay

Menu flutuante acionado por botão direito, com o mesmo conjunto de itens do dropdown-menu.

Botão direito na linha do ativo

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { ContextMenu } from "@trdr/ui/context-menu"

Uso

import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel } from "@trdr/ui/context-menu"

export function Exemplo() {
  return <ContextMenu />
}

Variantes

GrupoValoresPadrão
variant
defaultdestructive
default
inset
truefalse
false

Props

ContextMenuPropsestende React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>
ContextMenuTriggerPropsestende React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Trigger>
ContextMenuContentPropsestende React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
ContextMenuGroupPropsestende React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Group>
ContextMenuItemPropsestende React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>, VariantProps<typeof contextMenuItemVariants>
ContextMenuCheckboxItemPropsestende React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
ContextMenuRadioGroupPropsestende React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioGroup>
ContextMenuRadioItemPropsestende React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
ContextMenuLabelPropsestende React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label>
PropTipoDescrição
inset?boolean
ContextMenuSeparatorPropsestende React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
ContextMenuShortcutPropsestende React.HTMLAttributes<HTMLSpanElement>
ContextMenuSubPropsestende React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Sub>
ContextMenuSubTriggerPropsestende React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger>
PropTipoDescrição
inset?boolean
ContextMenuSubContentPropsestende React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>

Quando usar

Use o context-menu quando a acao faz sentido no lugar onde o usuario ja esta olhando: botao direito numa linha da tabela de ordens, num card de posicao, numa area do grafico. E o mesmo conjunto de itens do dropdown-menu (item, checkbox item, radio item, label, separador, atalho, sub-menu), so muda o gatilho: aqui e o evento nativo de botao direito, nao um clique num trigger visivel.

Quando nao usar

Nao use context-menu como unico caminho para uma acao importante: botao direito e um atalho avancado, nem todo usuario (nem todo dispositivo, pense em touch) sabe que ele existe ali. Toda acao do context-menu deveria estar disponivel por algum outro caminho visivel (um botao "...", um dropdown-menu). Para o menu acionado por clique num botao visivel, use o dropdown-menu diretamente.

Anatomia

Identica ao dropdown-menu, com o prefixo ContextMenu no lugar de DropdownMenu: ContextMenu (Root), ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioGroup + ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuSub + ContextMenuSubTrigger + ContextMenuSubContent (o SubContent tambem precisa ser embrulhado manualmente num ContextMenuPortal, igual ao dropdown-menu).

A diferenca fica so no ContextMenuTrigger: ele nao aceita asChild (o Radix sempre renderiza um <span> proprio aqui), entao o conteudo que escuta o botao direito vai como filho direto dele, por exemplo a propria linha da tabela ou a area do card.

Acessibilidade

A mesma navegacao por teclado do dropdown-menu (setas, Escape, busca por tipo, disabled fora da navegacao) se aplica aqui depois que o menu abre. Como o gatilho e um evento de mouse sem equivalente direto de teclado, todo fluxo critico exposto so pelo context-menu precisa de um caminho alternativo acessivel por teclado (um botao visivel, um item de dropdown-menu): o context-menu e sempre um atalho a mais, nunca o unico caminho.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="context-menu-checkbox-item"][data-slot="context-menu-content"][data-slot="context-menu-group"][data-slot="context-menu-item"][data-slot="context-menu-label"][data-slot="context-menu-radio-group"][data-slot="context-menu-radio-item"][data-slot="context-menu-separator"][data-slot="context-menu-shortcut"][data-slot="context-menu-sub-content"][data-slot="context-menu-sub-trigger"][data-slot="context-menu-trigger"]
16 tokens usados
bg-border-subtlebg-popoverbg-surface-errorbg-surface-secondaryborder-borderfill-currentoutline-noneshadow-mdtext-auxtext-b3text-b4text-content-brandtext-content-errortext-content-secondarytext-content-tertiarytext-popover-foreground