Context Menu

A menu opened from a contextual action.

Examples

Right-click here or press Shift+F10

No action selected

Installation

Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.

Install Context Menu

pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/context-menu.json'

Usage

A complete example using the installed component and hook paths.

Context Menu usage

"use client";import { useState } from "react";import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/components/ui/context-menu";function ContextMenuPreview() {  const [choice, setChoice] = useState("No action selected");  return (    <div className="w-full max-w-72 space-y-2">      <ContextMenu>        <ContextMenuTrigger          className="block rounded-lg border border-dashed p-4 text-center text-sm"          tabIndex={0}        >          Right-click here or press Shift+F10        </ContextMenuTrigger>        <ContextMenuContent>          <ContextMenuItem onClick={() => setChoice("Copy selected")}>Copy sample</ContextMenuItem>          <ContextMenuItem onClick={() => setChoice("Inspect selected")}>            Inspect sample          </ContextMenuItem>        </ContextMenuContent>      </ContextMenu>      <p aria-live="polite" className="text-xs text-muted-foreground">        {choice}      </p>    </div>  );}export default function Demo() {  return <ContextMenuPreview />;}

API Reference

Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.

ContextMenu

ContextMenu props

ContextMenuPrimitive.Root.Props

ContextMenuTrigger

ContextMenuTrigger props

ContextMenuPrimitive.Trigger.Props

ContextMenuContent

ContextMenuContent props

ContextMenuPrimitive.Popup.Props &  Pick<ContextMenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">

align: "start"
alignOffset: 4
side: "right"
sideOffset: 0

ContextMenuItem

ContextMenuItem props

ContextMenuPrimitive.Item.Props & {  inset?: boolean;  variant?: "default" | "destructive";} & { sound?: boolean }

variant: "default"
sound: true

ContextMenuCheckboxItem

ContextMenuCheckboxItem props

ContextMenuPrimitive.CheckboxItem.Props & {  inset?: boolean;} & { sound?: boolean }

sound: true

ContextMenuRadioItem

ContextMenuRadioItem props

ContextMenuPrimitive.RadioItem.Props & {  inset?: boolean;} & { sound?: boolean }

sound: true

ContextMenuLabel

ContextMenuLabel props

ContextMenuPrimitive.GroupLabel.Props & {  inset?: boolean;}

ContextMenuSeparator

ContextMenuSeparator props

ContextMenuPrimitive.Separator.Props

ContextMenuShortcut

ContextMenuShortcut props

React.ComponentProps<"span">

ContextMenuGroup

ContextMenuGroup props

ContextMenuPrimitive.Group.Props

ContextMenuPortal

ContextMenuPortal props

ContextMenuPrimitive.Portal.Props

ContextMenuSub

ContextMenuSub props

ContextMenuPrimitive.SubmenuRoot.Props

ContextMenuSubContent

ContextMenuSubContent props

React.ComponentProps<typeof ContextMenuContent>

ContextMenuSubTrigger

ContextMenuSubTrigger props

ContextMenuPrimitive.SubmenuTrigger.Props & {  inset?: boolean;} & { sound?: boolean }

sound: true

ContextMenuRadioGroup

ContextMenuRadioGroup props

ContextMenuPrimitive.RadioGroup.Props

Source

Registry JSON