ContextMenu

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

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 */ />