Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# ContextMenu

Menu triggered by right-clicking an element

## Example​

    import {
      ContextMenu,
      ContextMenuCheckboxItem,
      ContextMenuContent,
      ContextMenuItem,
      ContextMenuLabel,
      ContextMenuRadioGroup,
      ContextMenuRadioItem,
      ContextMenuSeparator,
      ContextMenuShortcut,
      ContextMenuSub,
      ContextMenuSubContent,
      ContextMenuSubTrigger,
      ContextMenuTrigger,
    } from "@databricks/appkit-ui/react"

    export default function ContextMenuExample() {
      return (
        <ContextMenu>
          <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
            Right click here
          </ContextMenuTrigger>
          <ContextMenuContent className="w-64">
            <ContextMenuItem inset>
              Back
              <ContextMenuShortcut>⌘[</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem inset disabled>
              Forward
              <ContextMenuShortcut>⌘]</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem inset>
              Reload
              <ContextMenuShortcut>⌘R</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuSub>
              <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
              <ContextMenuSubContent className="w-48">
                <ContextMenuItem>
                  Save Page As...
                  <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
                </ContextMenuItem>
                <ContextMenuItem>Create Shortcut...</ContextMenuItem>
                <ContextMenuItem>Name Window...</ContextMenuItem>
                <ContextMenuSeparator />
                <ContextMenuItem>Developer Tools</ContextMenuItem>
              </ContextMenuSubContent>
            </ContextMenuSub>
            <ContextMenuSeparator />
            <ContextMenuCheckboxItem checked>
              Show Bookmarks Bar
              <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
            </ContextMenuCheckboxItem>
            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
            <ContextMenuSeparator />
            <ContextMenuRadioGroup value="pedro">
              <ContextMenuLabel inset>People</ContextMenuLabel>
              <ContextMenuSeparator />
              <ContextMenuRadioItem value="pedro">
                Pedro Duarte
              </ContextMenuRadioItem>
              <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
            </ContextMenuRadioGroup>
          </ContextMenuContent>
        </ContextMenu>
      )
    }

## ContextMenu​

Menu triggered by right-clicking an element

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

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`onOpenChange` | `((open: boolean) => void)` |  | - | -
`dir` | `enum` |  | - | -
`modal` | `boolean` |  | - | -

### Usage​

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

    <ContextMenu /* props */ />

## ContextMenuCheckboxItem​

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

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`onSelect` | `((event: Event) => void)` |  | - | -
`asChild` | `boolean` |  | - | -
`disabled` | `boolean` |  | - | -
`checked` | `CheckedState` |  | - | -
`onCheckedChange` | `((checked: boolean) => void)` |  | - | -
`textValue` | `string` |  | - | -

### Usage​

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

    <ContextMenuCheckboxItem /* props */ />

## ContextMenuContent​

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

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | - | -
`forceMount` | `true` |  | - | 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.
`loop` | `boolean` |  | - | Whether keyboard navigation should loop around @defaultValue false
`alignOffset` | `number` |  | - | -
`arrowPadding` | `number` |  | - | -
`avoidCollisions` | `boolean` |  | - | -
`collisionBoundary` | `Boundary | Boundary[]` |  | - | -
`collisionPadding` | `number | Partial<Record<"left" | "right" | "top" | "bottom", number>>` |  | - | -
`sticky` | `enum` |  | - | -
`hideWhenDetached` | `boolean` |  | - | -
`updatePositionStrategy` | `enum` |  | - | -

### Usage​

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

    <ContextMenuContent /* props */ />

## ContextMenuGroup​

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

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | - | -

### Usage​

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

    <ContextMenuGroup /* props */ />

## ContextMenuItem​

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

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`onSelect` | `((event: Event) => void)` |  | - | -
`asChild` | `boolean` |  | - | -
`disabled` | `boolean` |  | - | -
`textValue` | `string` |  | - | -
`inset` | `boolean` |  | - | -
`variant` | `enum` |  | `default` | -

### Usage​

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

    <ContextMenuItem /* props */ />

## ContextMenuLabel​

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

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | - | -
`inset` | `boolean` |  | - | -

### Usage​

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

    <ContextMenuLabel /* props */ />

## ContextMenuPortal​

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

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`container` | `Element | DocumentFragment | null` |  | - | Specify a container element to portal the content into.
`forceMount` | `true` |  | - | 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​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | - | -
`value` | `string` | ✓ | - | -
`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​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`onSelect` | `((event: Event) => void)` |  | - | -
`asChild` | `boolean` |  | - | -
`disabled` | `boolean` |  | - | -
`value` | `string` | ✓ | - | -
`textValue` | `string` |  | - | -

### Usage​

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

    <ContextMenuRadioItem /* props */ />

## ContextMenuSeparator​

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

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | - | -

### 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​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`open` | `boolean` |  | - | -
`defaultOpen` | `boolean` |  | - | -
`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​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | - | -
`forceMount` | `true` |  | - | 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)` |  | - | -
`loop` | `boolean` |  | - | Whether keyboard navigation should loop around @defaultValue false
`sideOffset` | `number` |  | - | -
`alignOffset` | `number` |  | - | -
`arrowPadding` | `number` |  | - | -
`avoidCollisions` | `boolean` |  | - | -
`collisionBoundary` | `Boundary | Boundary[]` |  | - | -
`collisionPadding` | `number | Partial<Record<"left" | "right" | "top" | "bottom", number>>` |  | - | -
`sticky` | `enum` |  | - | -
`hideWhenDetached` | `boolean` |  | - | -
`updatePositionStrategy` | `enum` |  | - | -

### Usage​

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

    <ContextMenuSubContent /* props */ />

## ContextMenuSubTrigger​

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

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | - | -
`disabled` | `boolean` |  | - | -
`textValue` | `string` |  | - | -
`inset` | `boolean` |  | - | -

### Usage​

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

    <ContextMenuSubTrigger /* props */ />

## ContextMenuTrigger​

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

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`disabled` | `boolean` |  | - | -
`asChild` | `boolean` |  | - | -

### Usage​

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

    <ContextMenuTrigger /* props */ />