Context Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Right click here

Usage

It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
const {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
  contextMenuContentClassname,
  contextMenuSubContentClassname,
} = VM.require("uiisnear.near/widget/contextMenu");
 
if (Tailwind == undefined) return "";

<Tailwind>
  <ContextMenu>
    <ContextMenuTrigger>Right click</ContextMenuTrigger>
    <ContextMenuContent>
      <ContextMenuItem>Profile</ContextMenuItem>
      <ContextMenuItem>Billing</ContextMenuItem>
      <ContextMenuItem>Team</ContextMenuItem>
      <ContextMenuItem>Subscription</ContextMenuItem>
    </ContextMenuContent>
  </ContextMenu>
</Tailwind>

API Reference

ContextMenu

Contains all the parts of a context menu.

Prop	Type	Default
dir	enum	---
onOpenChange	function	---
modal	boolean	true

ContextMenuTrigger

The area that opens the context menu. Wrap it around the target you want the context menu to open from when right-clicking (or using the relevant keyboard shortcuts).

Prop	Type	Default
disabled	boolean	false

Data attribute	Values
[data-state]	"open" \| "closed"

ContextMenuContent

The component that pops out in an open context menu.

Prop	Type	Default
loop	boolean	false
onCloseAutoFocus	function	---
onEscapeKeyDown	function	---
onPointerDownOutside	function	---
onFocusOutside	function	---
onInteractOutside	function	---
forceMount	boolean	---
alignOffset	number	0
avoidCollisions	boolean	true
collisionBoundary	Boundary	[]
collisionPadding	number \| Padding	0
sticky	enum	"partial"
hideWhenDetached	boolean	false

Data attribute	Values
[data-state]	"open" \| "closed"
[data-side]	"left" \| "right" \| "bottom" \| "top"
[data-align]	"start" \| "end" \| "center"

ContextMenuItem

The component that contains the context menu items.

Prop	Type	Default
disabled	boolean	---
onSelect	function	---
textValue	string	---
inset	boolean	---

Data attribute	Values
[data-highlighted]	Present when highlighted
[data-disabled]	Present when disabled

ContextMenuGroup

Used to group multiple ContextMenuItems.

ContextMenuLabel

Used to render a label. It won't be focusable using arrow keys.

Prop	Type	Default
inset	boolean	---

ContextMenuCheckboxItem

An item that can be controlled and rendered like a checkbox.

Prop	Type	Default
checked	boolean \| 'indeterminate'	---
onCheckedChange	function	---
disabled	boolean	---
onSelect	function	---
textValue	string	---

Data attribute	Values
[data-state]	"checked" \| "unchecked" \| "indeterminate"
[data-highlighted]	Present when highlighted
[data-disabled]	Present when disabled

ContextMenuRadioGroup

Used to group multiple ContextMenuRadioItems.

Prop	Type	Default
value	string	---
onValueChange	function	---

ContextMenuRadioItem

An item that can be controlled and rendered like a radio.

Prop	Type	Default
value*	string	---
disabled	boolean	---
onSelect	function	---
textValue	string	---

Data attribute	Values
[data-state]	"checked" \| "unchecked" \| "indeterminate"
[data-highlighted]	Present when highlighted
[data-disabled]	Present when disabled

ContextMenuSeparator

Used to visually separate items in the context menu.

ContextMenuSub

Contains all the parts of a submenu.

Prop	Type	Default
defaultOpen	boolean	---
open	boolean	---
onOpenChange	function	---

ContextMenuSubTrigger

An item that opens a submenu. Must be rendered inside ContextMenuSub.

Prop	Type	Default
disabled	boolean	---
textValue	string	---
inset	boolean	---

Data attribute	Values
[data-state]	"open" \| "closed"
[data-highlighted]	Present when highlighted
[data-disabled]	Present when disabled

ContextMenuSubContent

The component that pops out when a submenu is open. Must be rendered inside ContextMenuSub.

Prop	Type	Default
loop	boolean	false
onEscapeKeyDown	function	---
onPointerDownOutside	function	---
onFocusOutside	function	---
onInteractOutside	function	---
forceMount	boolean	---
sideOffset	number	0
alignOffset	number	0
avoidCollisions	boolean	true
collisionBoundary	Boundary	[]
collisionPadding	number \| Padding	0
arrowPadding	number	0
sticky	enum	"partial"
hideWhenDetached	boolean	false

Data attribute	Values
[data-state]	"open" \| "closed"
[data-side]	"left" \| "right" \| "bottom" \| "top"
[data-align]	"start" \| "end" \| "center"

Classnames

Classnames available to customize the component.

Function	Classname
ContextMenuSubTrigger	contextMenuSubTriggerClassname
ContextMenuSubContent	contextMenuSubContentClassname
ContextMenuContent	contextMenuContentClassname
ContextMenuItem	contextMenuItemClassname
ContextMenuCheckboxItem	contextMenuCheckboxItemClassname
ContextMenuRadioItem	contextMenuRadioItemClassname
ContextMenuLabel	contextMenuLabelClassname
ContextMenuSeparator	contextMenuSeparatorClassname
ContextMenuShortcut	contextMenuShortcutClassname

Collapsible Dialog