Docs/ContextMenu

ContextMenu

Right-click context menu with items and separators.

Usage

tsx

1'use client'
2import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator } from '@storm-ds/ui'
3
4<ContextMenu>
5  <div>Right-click here</div>
6  <ContextMenuContent>
7    <ContextMenuLabel>File</ContextMenuLabel>
8    <ContextMenuItem>Copy</ContextMenuItem>
9    <ContextMenuItem>Paste</ContextMenuItem>
10  </ContextMenuContent>
11</ContextMenu>

Default

Right click here

Destructive Item

Right click for file actions

With Labels

Right click for editor actions

Note

Right-click on child content to show menu. Use destructive prop for dangerous actions.

Props

Prop	Type	Default	Description
destructive	boolean	false	Show in red for dangerous actions (ContextMenuItem)
className	string	-	Custom classes on any sub-component

Use with AI

Create a Next.js client component using Storm UI's ContextMenu. Import: `import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator } from '@storm-ds/ui'`. Use 'use client'. Wraps any child element; right-click triggers menu. Menu positioned under cursor. Use ContextMenuLabel for section headings. Use destructive prop on ContextMenuItem to show action in red. Use ContextMenuSeparator for dividers. Example: `<ContextMenu><div>Right-click</div><ContextMenuContent><ContextMenuLabel>Actions</ContextMenuLabel><ContextMenuItem>Copy</ContextMenuItem><ContextMenuSeparator /><ContextMenuItem destructive>Delete</ContextMenuItem></ContextMenuContent></ContextMenu>`

DropdownMenu

Tabs