ContextMenu

A menu that opens where you right-click.

Import

Copy code

import { ContextMenu } from '@k8ordo/ui';

Usage

The inside is DropdownMenu’s (Content / Item / SubMenu); only how it opens and where differ. From the keyboard, press Shift+F10 or the context-menu key on the focused area. When it closes, focus returns to where it was before it opened.

report.pdf

tsx

Copy code

<ContextMenu.Root>
  <ContextMenu.Trigger
    renderItem={(props) => (
      <div {...props} tabIndex={0}>
        report.pdf
      </div>
    )}
  />
  <ContextMenu.Content>
    <ContextMenu.Item label="Rename" onAction={rename} />
    <ContextMenu.SubMenu label="Move to">
      <ContextMenu.Item label="Archive" onAction={archive} />
      <ContextMenu.Item label="Drafts" onAction={toDrafts} />
    </ContextMenu.SubMenu>
    <ContextMenu.Item label="Delete" onAction={remove} />
  </ContextMenu.Content>
</ContextMenu.Root>

Props

ContextMenu.Root

children?: Type: ReactNode; Default: -
defaultOpen?: Type: boolean; Default: -
isOpen?: Type: boolean; Default: -
onChange?: Type: (isOpen: boolean) => void; Default: -

Prop	Type	Default
`children?`	`ReactNode`	-
`defaultOpen?`	`boolean`	-
`isOpen?`	`boolean`	-
`onChange?`	`(isOpen: boolean) => void`	-

ContextMenu.Trigger

renderItem: Type: (props: { onContextMenu: MouseEventHandler<HTMLElement>; }) => ReactElement; Default: -

Prop	Type	Default
`renderItem`	`(props: { onContextMenu: MouseEventHandler<HTMLElement>; }) => ReactElement`	-

ContextMenu.Item

label: Type: string; Default: -
onAction: Type: () => void; Default: -

Prop	Type	Default
`label`	`string`	-
`onAction`	`() => void`	-

ContextMenu.SubMenu

label: Type: string; Default: -
children?: Type: ReactNode; Default: -

Prop	Type	Default
`label`	`string`	-
`children?`	`ReactNode`	-