Skip to main content

ContextMenu

Menu triggered by right-clicking an element

Example

context-menu
Loading preview…

ContextMenu

Menu triggered by right-clicking an element

Source: packages/appkit-ui/src/react/ui/context-menu.tsx

Props

PropTypeRequiredDefaultDescription
onOpenChange((open: boolean) => void)--
direnum--
modalboolean--

Usage

import { ContextMenu } from '@databricks/appkit-ui';

<ContextMenu /* props */ />

ContextMenuCheckboxItem

Source: packages/appkit-ui/src/react/ui/context-menu.tsx

Props

PropTypeRequiredDefaultDescription
onSelect((event: Event) => void)--
asChildboolean--
disabledboolean--
checkedCheckedState--
onCheckedChange((checked: boolean) => void)--
textValuestring--

Usage

import { ContextMenuCheckboxItem } from '@databricks/appkit-ui';

<ContextMenuCheckboxItem /* props */ />

ContextMenuContent

Source: packages/appkit-ui/src/react/ui/context-menu.tsx

Props

PropTypeRequiredDefaultDescription
asChildboolean--
forceMounttrue-Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
onEscapeKeyDown((event: KeyboardEvent) => void)--
onPointerDownOutside((event: PointerDownOutsideEvent) => void)--
onFocusOutside((event: FocusOutsideEvent) => void)--
onInteractOutside((event: FocusOutsideEvent | PointerDownOutsideEvent) => void)--
onCloseAutoFocus((event: Event) => void)-Event handler called when auto-focusing on close. Can be prevented.
loopboolean-Whether keyboard navigation should loop around @defaultValue false
alignOffsetnumber--
arrowPaddingnumber--
avoidCollisionsboolean--
collisionBoundaryBoundary | Boundary[]--
collisionPaddingnumber | Partial<Record<"left" | "right" | "top" | "bottom", number>>--
stickyenum--
hideWhenDetachedboolean--
updatePositionStrategyenum--

Usage

import { ContextMenuContent } from '@databricks/appkit-ui';

<ContextMenuContent /* props */ />

ContextMenuGroup

Source: packages/appkit-ui/src/react/ui/context-menu.tsx

Props

PropTypeRequiredDefaultDescription
asChildboolean--

Usage

import { ContextMenuGroup } from '@databricks/appkit-ui';

<ContextMenuGroup /* props */ />

ContextMenuItem

Source: packages/appkit-ui/src/react/ui/context-menu.tsx

Props

PropTypeRequiredDefaultDescription
onSelect((event: Event) => void)--
asChildboolean--
disabledboolean--
textValuestring--
insetboolean--
variantenumdefault-

Usage

import { ContextMenuItem } from '@databricks/appkit-ui';

<ContextMenuItem /* props */ />

ContextMenuLabel

Source: packages/appkit-ui/src/react/ui/context-menu.tsx

Props

PropTypeRequiredDefaultDescription
asChildboolean--
insetboolean--

Usage

import { ContextMenuLabel } from '@databricks/appkit-ui';

<ContextMenuLabel /* props */ />

ContextMenuPortal

Source: packages/appkit-ui/src/react/ui/context-menu.tsx

Props

PropTypeRequiredDefaultDescription
containerElement | DocumentFragment | null-Specify a container element to portal the content into.
forceMounttrue-Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

Usage

import { ContextMenuPortal } from '@databricks/appkit-ui';

<ContextMenuPortal /* props */ />

ContextMenuRadioGroup

Source: packages/appkit-ui/src/react/ui/context-menu.tsx

Props

PropTypeRequiredDefaultDescription
asChildboolean--
valuestring--
onValueChange((value: string) => void)--

Usage

import { ContextMenuRadioGroup } from '@databricks/appkit-ui';

<ContextMenuRadioGroup /* props */ />

ContextMenuRadioItem

Source: packages/appkit-ui/src/react/ui/context-menu.tsx

Props

PropTypeRequiredDefaultDescription
onSelect((event: Event) => void)--
asChildboolean--
disabledboolean--
valuestring--
textValuestring--

Usage

import { ContextMenuRadioItem } from '@databricks/appkit-ui';

<ContextMenuRadioItem /* props */ />

ContextMenuSeparator

Source: packages/appkit-ui/src/react/ui/context-menu.tsx

Props

PropTypeRequiredDefaultDescription
asChildboolean--

Usage

import { ContextMenuSeparator } from '@databricks/appkit-ui';

<ContextMenuSeparator /* props */ />

ContextMenuShortcut

Source: packages/appkit-ui/src/react/ui/context-menu.tsx

Props

This component extends standard HTML element attributes.

Usage

import { ContextMenuShortcut } from '@databricks/appkit-ui';

<ContextMenuShortcut /* props */ />

ContextMenuSub

Source: packages/appkit-ui/src/react/ui/context-menu.tsx

Props

PropTypeRequiredDefaultDescription
openboolean--
defaultOpenboolean--
onOpenChange((open: boolean) => void)--

Usage

import { ContextMenuSub } from '@databricks/appkit-ui';

<ContextMenuSub /* props */ />

ContextMenuSubContent

Source: packages/appkit-ui/src/react/ui/context-menu.tsx

Props

PropTypeRequiredDefaultDescription
asChildboolean--
forceMounttrue-Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
onEscapeKeyDown((event: KeyboardEvent) => void)--
onPointerDownOutside((event: PointerDownOutsideEvent) => void)--
onFocusOutside((event: FocusOutsideEvent) => void)--
onInteractOutside((event: FocusOutsideEvent | PointerDownOutsideEvent) => void)--
loopboolean-Whether keyboard navigation should loop around @defaultValue false
sideOffsetnumber--
alignOffsetnumber--
arrowPaddingnumber--
avoidCollisionsboolean--
collisionBoundaryBoundary | Boundary[]--
collisionPaddingnumber | Partial<Record<"left" | "right" | "top" | "bottom", number>>--
stickyenum--
hideWhenDetachedboolean--
updatePositionStrategyenum--

Usage

import { ContextMenuSubContent } from '@databricks/appkit-ui';

<ContextMenuSubContent /* props */ />

ContextMenuSubTrigger

Source: packages/appkit-ui/src/react/ui/context-menu.tsx

Props

PropTypeRequiredDefaultDescription
asChildboolean--
disabledboolean--
textValuestring--
insetboolean--

Usage

import { ContextMenuSubTrigger } from '@databricks/appkit-ui';

<ContextMenuSubTrigger /* props */ />

ContextMenuTrigger

Source: packages/appkit-ui/src/react/ui/context-menu.tsx

Props

PropTypeRequiredDefaultDescription
disabledboolean--
asChildboolean--

Usage

import { ContextMenuTrigger } from '@databricks/appkit-ui';

<ContextMenuTrigger /* props */ />