Primitiveoverlay

Context Menu

Stable

O mesmo menu do Dropdown, invocado pelo objeto em vez de por um botão: clique secundário, pressão longa ou a tecla de menu da plataforma. Composto sobre Base UI ContextMenu. O risco do primitive é justamente não ter gatilho visível, então nenhuma ação pode existir só aqui — o menu é o atalho, não a rota.

Instalação

npx up-web-ds add context-menu

Gera check, chevron-right para a biblioteca de ícones do projeto (components.json → iconLibrary).

Preview

Basic

Clique com o botão direito

Default

primitives/button

Clique com o botão direito, ou use a tecla de menu

With Groups And State

Área do catálogo

Filtros e ordenação vivem no menu de contexto

With Visible Equivalent

primitives/select

As mesmas ações estão abaixo, à vista

Abrir no catálogoCopiar comando

All states

Basic

Clique com o botão direito

Default

primitives/button

Clique com o botão direito, ou use a tecla de menu

With Groups And State

Área do catálogo

Filtros e ordenação vivem no menu de contexto

With Visible Equivalent

primitives/select

As mesmas ações estão abaixo, à vista

Abrir no catálogoCopiar comando

Usage

@/components/ui/context-menu

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from '@/components/ui/context-menu'

Context Menu

1
2
3
4
5
6
7
8
9
10<ContextMenu>
  <ContextMenuTrigger className="flex h-24 w-full max-w-sm items-center justify-center rounded-lg border border-dashed border-border type-small text-muted-foreground">
    Clique com o botão direito
  </ContextMenuTrigger>

  <ContextMenuContent>
    <ContextMenuItem>Abrir no catálogo</ContextMenuItem>
    <ContextMenuItem>Copiar comando de instalação</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Props

ContextMenu

Props de ContextMenu
Prop	Type	Default	Description
actionsRef	`React.RefObject<MenuRootActions \| null>`	sem valor padrão	A ref to imperative actions. - `unmount`: Manually unmounts the menu. Call this after any externally controlled closing animation finishes. - `close`: When specified, the menu can be closed imperatively.
children	`React.ReactNode`	sem valor padrão
closeParentOnEsc	`boolean`	`false`	When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu.
defaultOpen	`boolean`	`false`	Whether the menu is initially open. To render a controlled menu, use the `open` prop instead.
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
highlightItemOnHover	`boolean`	`true`	Whether moving the pointer over items should highlight them. Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
loopFocus	`boolean`	`true`	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
onOpenChange	`((open: boolean, eventDetails: ContextMenuRoot.ChangeEventDetails) => void)`	sem valor padrão	Event handler called when the menu is opened or closed.
onOpenChangeComplete	`((open: boolean) => void)`	sem valor padrão	Event handler called after any animations complete when the menu is opened or closed.
open	`boolean`	sem valor padrão	Whether the menu is currently open.
orientation	`MenuRootOrientation`	`'vertical'`	The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys.

Estende ContextMenuPrimitive.Root.Props.

ContextMenuPortal

Props de ContextMenuPortal
Prop	Type	Default	Description
className	`string \| ((state: MenuPortalState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
container	`HTMLElement \| ShadowRoot \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| null`	sem valor padrão	A parent element to render the portal element into.
keepMounted	`boolean`	`false`	Whether to keep the portal mounted in the DOM while the popup is hidden.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, MenuPortalState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: MenuPortalState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende ContextMenuPrimitive.Portal.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

ContextMenuTrigger

Props de ContextMenuTrigger
Prop	Type	Default	Description
className	`string \| ((state: ContextMenuTriggerState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ContextMenuTriggerState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: ContextMenuTriggerState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende ContextMenuPrimitive.Trigger.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

ContextMenuContent

Props de ContextMenuContent
Prop	Type	Default	Description
align	`Align`	`'start'`	How to align the popup relative to the specified side.
alignOffset	`number \| OffsetFunction`	`4`	Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side.
children	`React.ReactNode`	sem valor padrão
className	`string \| ((state: MenuPopupState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
finalFocus	`boolean \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => boolean \| HTMLElement \| null \| void)`	sem valor padrão	Determines the element to focus when the menu is closed. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (trigger or previously focused element). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
id	`string`	sem valor padrão
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, MenuPopupState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
side	`Side`	`'right'`	Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
sideOffset	`number \| OffsetFunction`	`0`	Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side.
style	`React.CSSProperties \| ((state: MenuPopupState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende ContextMenuPrimitive.Popup.Props & Pick< ContextMenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' >. Aceita também os atributos padrão de um elemento React (273 não listados).

ContextMenuGroup

Props de ContextMenuGroup
Prop	Type	Default	Description
children	`React.ReactNode`	sem valor padrão	The content of the component.
className	`string \| ((state: MenuGroupState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, MenuGroupState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: MenuGroupState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende ContextMenuPrimitive.Group.Props. Aceita também os atributos padrão de um elemento React (274 não listados).

ContextMenuLabel

Props de ContextMenuLabel
Prop	Type	Default	Description
inset	`boolean`	sem valor padrão
className	`string \| ((state: MenuGroupLabelState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, MenuGroupLabelState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: MenuGroupLabelState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende ContextMenuPrimitive.GroupLabel.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

ContextMenuItem

Props de ContextMenuItem
Prop	Type	Default	Description
inset	`boolean`	sem valor padrão
variant	`"default" \| "destructive"`	`'default'`
className	`string \| ((state: MenuItemState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
closeOnClick	`boolean`	`true`	Whether to close the menu when the item is clicked.
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
id	`string`	sem valor padrão
label	`string`	sem valor padrão	Overrides the text label to use when the item is matched during keyboard text navigation.
nativeButton	`boolean`	`false`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.
onClick	`((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)`	sem valor padrão	The click handler for the menu item.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, MenuItemState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: MenuItemState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende ContextMenuPrimitive.Item.Props. Aceita também os atributos padrão de um elemento React (273 não listados).

ContextMenuSub

Props de ContextMenuSub
Prop	Type	Default	Description
actionsRef	`React.RefObject<MenuRootActions \| null>`	sem valor padrão	A ref to imperative actions. - `unmount`: Manually unmounts the menu. Call this after any externally controlled closing animation finishes. - `close`: When specified, the menu can be closed imperatively.
children	`React.ReactNode`	sem valor padrão	The content of the submenu.
closeParentOnEsc	`boolean`	`false`	When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu.
defaultOpen	`boolean`	`false`	Whether the menu is initially open. To render a controlled menu, use the `open` prop instead.
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
highlightItemOnHover	`boolean`	`true`	Whether moving the pointer over items should highlight them. Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
loopFocus	`boolean`	`true`	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
onOpenChange	`((open: boolean, eventDetails: MenuSubmenuRoot.ChangeEventDetails) => void)`	sem valor padrão	Event handler called when the menu is opened or closed.
onOpenChangeComplete	`((open: boolean) => void)`	sem valor padrão	Event handler called after any animations complete when the menu is opened or closed.
open	`boolean`	sem valor padrão	Whether the menu is currently open.
orientation	`MenuRootOrientation`	`'vertical'`	The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys.

Estende ContextMenuPrimitive.SubmenuRoot.Props.

ContextMenuSubTrigger

Props de ContextMenuSubTrigger
Prop	Type	Default	Description
inset	`boolean`	sem valor padrão
className	`string \| ((state: MenuSubmenuTriggerState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
closeDelay	`number`	`0`	How long to wait before closing the menu that was opened on hover. Specified in milliseconds. Requires the `openOnHover` prop.
delay	`number`	`100`	How long to wait before the menu may be opened on hover. Specified in milliseconds. Requires the `openOnHover` prop.
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
id	`string`	sem valor padrão
label	`string`	sem valor padrão	Overrides the text label to use when the item is matched during keyboard text navigation.
nativeButton	`boolean`	`false`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.
onClick	`((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)`	sem valor padrão
openOnHover	`boolean`	sem valor padrão	Whether the menu should also open when the trigger is hovered.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, MenuSubmenuTriggerState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: MenuSubmenuTriggerState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende ContextMenuPrimitive.SubmenuTrigger.Props. Aceita também os atributos padrão de um elemento React (273 não listados).

ContextMenuSubContent

Props de ContextMenuSubContent
Prop	Type	Default	Description
align	`Align`	`'center'`	How to align the popup relative to the specified side.
alignOffset	`number \| OffsetFunction`	`0`	Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side.
children	`React.ReactNode`	sem valor padrão
className	`string \| ((state: MenuPopupState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
finalFocus	`boolean \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => boolean \| HTMLElement \| null \| void)`	sem valor padrão	Determines the element to focus when the menu is closed. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (trigger or previously focused element). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
id	`string`	sem valor padrão
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, MenuPopupState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
side	`Side`	`'bottom'`	Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
sideOffset	`number \| OffsetFunction`	`0`	Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side.
style	`React.CSSProperties \| ((state: MenuPopupState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende React.ComponentProps<typeof ContextMenuContent>. Aceita também os atributos padrão de um elemento React (273 não listados).

ContextMenuCheckboxItem

Props de ContextMenuCheckboxItem
Prop	Type	Default	Description
inset	`boolean`	sem valor padrão
checked	`boolean`	sem valor padrão	Whether the checkbox item is currently ticked. To render an uncontrolled checkbox item, use the `defaultChecked` prop instead.
className	`string \| ((state: MenuCheckboxItemState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
closeOnClick	`boolean`	`false`	Whether to close the menu when the item is clicked.
defaultChecked	`boolean`	`false`	Whether the checkbox item is initially ticked. To render a controlled checkbox item, use the `checked` prop instead.
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
id	`string`	sem valor padrão
label	`string`	sem valor padrão	Overrides the text label to use when the item is matched during keyboard text navigation.
nativeButton	`boolean`	`false`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.
onCheckedChange	`((checked: boolean, eventDetails: MenuCheckboxItem.ChangeEventDetails) => void)`	sem valor padrão	Event handler called when the checkbox item is ticked or unticked.
onClick	`((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)`	sem valor padrão	The click handler for the menu item.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, MenuCheckboxItemState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: MenuCheckboxItemState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende ContextMenuPrimitive.CheckboxItem.Props. Aceita também os atributos padrão de um elemento React (273 não listados).

ContextMenuRadioGroup

Props de ContextMenuRadioGroup
Prop	Type	Default	Description
children	`React.ReactNode`	sem valor padrão	The content of the component.
className	`string \| ((state: MenuRadioGroupState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
defaultValue	`any`	sem valor padrão	The uncontrolled value of the radio item that should be initially selected. To render a controlled radio group, use the `value` prop instead.
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
onValueChange	`((value: any, eventDetails: MenuRadioGroup.ChangeEventDetails) => void)`	sem valor padrão	Function called when the selected value changes.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, MenuRadioGroupState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: MenuRadioGroupState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.
value	`any`	sem valor padrão	The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the `defaultValue` prop instead.

Estende ContextMenuPrimitive.RadioGroup.Props. Aceita também os atributos padrão de um elemento React (274 não listados).

ContextMenuRadioItem

Props de ContextMenuRadioItem
Prop	Type	Default	Description
inset	`boolean`	sem valor padrão
value, obrigatória	`any`	sem valor padrão	Value of the radio item. This is the value that will be set in the MenuRadioGroup when the item is selected.
className	`string \| ((state: MenuRadioItemState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
closeOnClick	`boolean`	`false`	Whether to close the menu when the item is clicked.
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
id	`string`	sem valor padrão
label	`string`	sem valor padrão	Overrides the text label to use when the item is matched during keyboard text navigation.
nativeButton	`boolean`	`false`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.
onClick	`((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)`	sem valor padrão	The click handler for the menu item.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, MenuRadioItemState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: MenuRadioItemState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende ContextMenuPrimitive.RadioItem.Props. Aceita também os atributos padrão de um elemento React (273 não listados).

ContextMenuSeparator

Props de ContextMenuSeparator
Prop	Type	Default	Description
className	`string \| ((state: SeparatorState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
orientation	`Orientation`	`'horizontal'`	The orientation of the separator.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SeparatorState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: SeparatorState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende ContextMenuPrimitive.Separator.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

prop obrigatória.

Composition

O ContextMenuTrigger é a superfície que responde ao clique direito; tudo que aparece vive dentro do ContextMenuContent.

Composição de ContextMenu

ContextMenu

ContextMenuTrigger
ContextMenuContent
- ContextMenuGroup
  - ContextMenuLabel
  - ContextMenuItem
  - ContextMenuCheckboxItem
- ContextMenuRadioGroup
  - ContextMenuRadioItem
- ContextMenuSeparator
- ContextMenuSub
  - ContextMenuSubTrigger
  - ContextMenuSubContent

Metadata

Notas de acessibilidade

Teclado verificado por teste: aberto o menu, as setas percorrem os itens pulando os rótulos, digitar as primeiras letras encontra um item, ArrowRight abre o submenu e ArrowLeft volta ao item que o abriu, e Escape fecha. Leitor de tela verificado por teste: o popup tem papel menu, itens de checkbox reportam aria-checked, um gatilho de submenu declara aria-haspopup="menu" e um item desabilitado continua anunciado por aria-disabled recusando a execução sem fechar o menu. Touch verificado em navegador com emulação de toque em viewport de 375px: a pressão longa abre o menu, os itens medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8 e o menu cabe na viewport. Reduced motion verificado com prefers-reduced-motion: reduce — os tokens de motion colapsam para 1ms e a animação de entrada mede 0.001s.

Classificação

Layer: Primitive
Domínio: Domain-free (compartilhado)
Categoria: overlay
Status: Stable

Origem e distribuição

Fonte: shadcn registry / context-menu
Licença: MIT
URL: https://ui.shadcn.com/r/styles/base-vega/context-menu.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: @base-ui/react
Ícones: check, chevron-right
Construído sobre: Nenhum
Usado por: Nenhum ainda

Instalação

Preview

Usage

Props

ContextMenu

ContextMenuPortal

ContextMenuTrigger

ContextMenuContent

ContextMenuGroup

ContextMenuLabel

ContextMenuItem

ContextMenuSub

ContextMenuSubTrigger

ContextMenuSubContent

ContextMenuCheckboxItem

ContextMenuRadioGroup

ContextMenuRadioItem

ContextMenuSeparator

ContextMenuShortcut

Composition

Metadata

Notas de acessibilidade

Classificação

Origem e distribuição

Acessibilidade

Dependências