# ContextMenu

Menu triggered by right-clicking an element

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
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[​](#contextmenu-1 "Direct link to ContextMenu")

Menu triggered by right-clicking an element

**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx)

### Props[​](#props "Direct link to Props")

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

### Usage[​](#usage "Direct link to Usage")

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

<ContextMenu /* props */ />

```

## ContextMenuCheckboxItem[​](#contextmenucheckboxitem "Direct link to ContextMenuCheckboxItem")

**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx)

### Props[​](#props-1 "Direct link to Props")

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

### Usage[​](#usage-1 "Direct link to Usage")

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

<ContextMenuCheckboxItem /* props */ />

```

## ContextMenuContent[​](#contextmenucontent "Direct link to ContextMenuContent")

**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx)

### Props[​](#props-2 "Direct link to 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[​](#usage-2 "Direct link to Usage")

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

<ContextMenuContent /* props */ />

```

## ContextMenuGroup[​](#contextmenugroup "Direct link to ContextMenuGroup")

**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx)

### Props[​](#props-3 "Direct link to Props")

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

### Usage[​](#usage-3 "Direct link to Usage")

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

<ContextMenuGroup /* props */ />

```

## ContextMenuItem[​](#contextmenuitem "Direct link to ContextMenuItem")

**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx)

### Props[​](#props-4 "Direct link to Props")

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

### Usage[​](#usage-4 "Direct link to Usage")

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

<ContextMenuItem /* props */ />

```

## ContextMenuLabel[​](#contextmenulabel "Direct link to ContextMenuLabel")

**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx)

### Props[​](#props-5 "Direct link to Props")

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

### Usage[​](#usage-5 "Direct link to Usage")

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

<ContextMenuLabel /* props */ />

```

## ContextMenuPortal[​](#contextmenuportal "Direct link to ContextMenuPortal")

**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx)

### Props[​](#props-6 "Direct link to 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[​](#usage-6 "Direct link to Usage")

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

<ContextMenuPortal /* props */ />

```

## ContextMenuRadioGroup[​](#contextmenuradiogroup "Direct link to ContextMenuRadioGroup")

**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx)

### Props[​](#props-7 "Direct link to Props")

| Prop            | Type                        | Required | Default | Description |
| --------------- | --------------------------- | -------- | ------- | ----------- |
| `asChild`       | `boolean`                   |          | -       | -           |
| `value`         | `string`                    | ✓        | -       | -           |
| `onValueChange` | `((value: string) => void)` |          | -       | -           |

### Usage[​](#usage-7 "Direct link to Usage")

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

<ContextMenuRadioGroup /* props */ />

```

## ContextMenuRadioItem[​](#contextmenuradioitem "Direct link to ContextMenuRadioItem")

**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx)

### Props[​](#props-8 "Direct link to Props")

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

### Usage[​](#usage-8 "Direct link to Usage")

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

<ContextMenuRadioItem /* props */ />

```

## ContextMenuSeparator[​](#contextmenuseparator "Direct link to ContextMenuSeparator")

**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx)

### Props[​](#props-9 "Direct link to Props")

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

### Usage[​](#usage-9 "Direct link to Usage")

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

<ContextMenuSeparator /* props */ />

```

## ContextMenuShortcut[​](#contextmenushortcut "Direct link to ContextMenuShortcut")

**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx)

### Props[​](#props-10 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-10 "Direct link to Usage")

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

<ContextMenuShortcut /* props */ />

```

## ContextMenuSub[​](#contextmenusub "Direct link to ContextMenuSub")

**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx)

### Props[​](#props-11 "Direct link to Props")

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

### Usage[​](#usage-11 "Direct link to Usage")

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

<ContextMenuSub /* props */ />

```

## ContextMenuSubContent[​](#contextmenusubcontent "Direct link to ContextMenuSubContent")

**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx)

### Props[​](#props-12 "Direct link to 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[​](#usage-12 "Direct link to Usage")

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

<ContextMenuSubContent /* props */ />

```

## ContextMenuSubTrigger[​](#contextmenusubtrigger "Direct link to ContextMenuSubTrigger")

**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx)

### Props[​](#props-13 "Direct link to Props")

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

### Usage[​](#usage-13 "Direct link to Usage")

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

<ContextMenuSubTrigger /* props */ />

```

## ContextMenuTrigger[​](#contextmenutrigger "Direct link to ContextMenuTrigger")

**Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx)

### Props[​](#props-14 "Direct link to Props")

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

### Usage[​](#usage-14 "Direct link to Usage")

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

<ContextMenuTrigger /* props */ />

```