║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Context Menu description: A menu component triggered by right-click or long press. links: doc: https://base-ui.com/react/components/context-menu api: https://base-ui.com/react/components/context-menu#api-reference

<ComponentPreview name="context-menu-demo" />

Installation

<InstallationTabs> <InstallationTabsList> <InstallationTabsTrigger value="cli">CLI</InstallationTabsTrigger> <InstallationTabsTrigger value="manual">Manual</InstallationTabsTrigger> </InstallationTabsList> <InstallationTabsContent value="cli"> <CodeBlockTabs> <CodeBlockTabsList> <CodeBlockTabsTrigger value="npm">npm</CodeBlockTabsTrigger> <CodeBlockTabsTrigger value="pnpm">pnpm</CodeBlockTabsTrigger> </CodeBlockTabsList> <CodeBlockTab value="npm">

npx shadcn@latest add @roiui/context-menu

npx shadcn@latest add @roiui/context-menu-tailwind

</CodeBlockTab> <CodeBlockTab value="pnpm">

pnpm dlx shadcn@latest add @roiui/context-menu

pnpm dlx shadcn@latest add @roiui/context-menu-tailwind

</CodeBlockTab> </CodeBlockTabs> </InstallationTabsContent> <InstallationTabsContent value="manual" data-manual="true">

Copy and paste the following files:

<ComponentSource name="context-menu" />

</InstallationTabsContent> </InstallationTabs>

Anatomy

<CodeBlock filename="anatomy" language="tsx" code={<ContextMenu> <ContextMenuTrigger /> <ContextMenuPortal> <ContextMenuBackdrop /> <ContextMenuPositioner> <ContextMenuPopup> <ContextMenuArrow /> <ContextMenuItem /> <ContextMenuSeparator /> <ContextMenuCheckboxItem /> <ContextMenuRadioGroup> <ContextMenuRadioItem /> </ContextMenuRadioGroup> <ContextMenuLabel /> <ContextMenuSubmenu> <ContextMenuSubmenuTrigger /> <ContextMenuPortal> <ContextMenuPositioner> <ContextMenuPopup> <ContextMenuItem /> </ContextMenuPopup> </ContextMenuPositioner> </ContextMenuPortal> </ContextMenuSubmenu> <ContextMenuShortcut /> </ContextMenuPopup> </ContextMenuPositioner> </ContextMenuPortal> </ContextMenu> } />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║