Context Menu

Right-click menu with items and submenus.

Right click here

Installation

npx @noarka/cli add context-menu

Usage

tsx

import {  ContextMenu,  ContextMenuContent,  ContextMenuItem,  ContextMenuSeparator,  ContextMenuTrigger,} from "@noarka/ui";

tsx

<ContextMenu>  <ContextMenuTrigger className="flex h-32 items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground">    Right click me  </ContextMenuTrigger>  <ContextMenuContent>    <ContextMenuItem>Copy</ContextMenuItem>    <ContextMenuItem>Paste</ContextMenuItem>    <ContextMenuSeparator />    <ContextMenuItem variant="destructive">Delete</ContextMenuItem>  </ContextMenuContent></ContextMenu>

Examples

With label

Head the menu with an account label.

Right click here

With shortcuts

Hint at keyboard equivalents.

Right click here

With submenu

Nest a submenu off any item trigger.

Right click here

API reference

ContextMenu

Prop	Type	Default
`open` Controlled open state. Use with onOpenChange.	`boolean`	`-`
`defaultOpen` Initially open when uncontrolled.	`boolean`	`false`
`onOpenChange` Called when the menu opens or closes.	`(open: boolean) => void`	`-`
`disabled` Ignore user interaction.	`boolean`	`false`

ContextMenuTrigger

Prop	Type	Default
`children` The right-click area. Usually a dashed zone describing the gesture.	`ReactNode`	`-`
`className` Additional classes merged on the trigger area.	`string`	`-`

ContextMenuContent

Prop	Type	Default
`side` Preferred placement side.	`"top" \| "right" \| "bottom" \| "left"`	`-`
`sideOffset` Gap between cursor and panel.	`number`	`4`
`align` Alignment against the cursor point.	`"start" \| "center" \| "end"`	`"start"`
`alignOffset` Offset along the alignment axis.	`number`	`-`
`render` Polymorphic render prop. Use to render a custom element instead of the default panel.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default panel styles.	`string`	`-`

ContextMenuItem

Prop	Type	Default
`variant` Destructive tints the item red.	`"default" \| "destructive"`	`"default"`
`inset` Offset content to align with labeled groups.	`boolean`	`-`
`onSelect` Back-compat alias for onClick. The menu still closes on select unless closeOnClick is false.	`(event) => void`	`-`
`disabled` Disable the item.	`boolean`	`false`
`render` Polymorphic render prop.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default item styles.	`string`	`-`

ContextMenuLabel

Prop	Type	Default
`inset` Offset content to align with inset items. The label renders its own group, so it works directly inside content.	`boolean`	`-`
`className` Additional classes merged with the default label styles.	`string`	`-`

ContextMenuSeparator

Prop	Type	Default
`className` Additional classes merged with the default separator styles.	`string`	`-`

ContextMenuShortcut

Prop	Type	Default
`className` Additional classes merged with the shortcut hint styles.	`string`	`-`

ContextMenuSubTrigger

Prop	Type	Default
`inset` Offset content to align with inset items.	`boolean`	`-`
`disabled` Disable the submenu trigger.	`boolean`	`false`
`className` Additional classes merged with the default trigger styles.	`string`	`-`