Docs
Context Menu
Context Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
This component uses Radix UI
Right click here
import {
ContextMenu_Shadcn_,
ContextMenuCheckboxItem_Shadcn_,
ContextMenuContent_Shadcn_,
ContextMenuItem_Shadcn_,
ContextMenuLabel_Shadcn_,
ContextMenuRadioGroup_Shadcn_,
ContextMenuRadioItem_Shadcn_,
ContextMenuSeparator_Shadcn_,
ContextMenuShortcut_Shadcn_,
ContextMenuSub_Shadcn_,
ContextMenuSubContent_Shadcn_,
ContextMenuSubTrigger_Shadcn_,
ContextMenuTrigger_Shadcn_,
} from 'ui'
export function ContextMenuDemo() {
return (
<ContextMenu_Shadcn_>
<ContextMenuTrigger_Shadcn_ className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
Right click here
</ContextMenuTrigger_Shadcn_>
<ContextMenuContent_Shadcn_ className="w-64">
<ContextMenuItem_Shadcn_ inset>
Back
<ContextMenuShortcut_Shadcn_>⌘[</ContextMenuShortcut_Shadcn_>
</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_ inset disabled>
Forward
<ContextMenuShortcut_Shadcn_>⌘]</ContextMenuShortcut_Shadcn_>
</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_ inset>
Reload
<ContextMenuShortcut_Shadcn_>⌘R</ContextMenuShortcut_Shadcn_>
</ContextMenuItem_Shadcn_>
<ContextMenuSub_Shadcn_>
<ContextMenuSubTrigger_Shadcn_ inset>More Tools</ContextMenuSubTrigger_Shadcn_>
<ContextMenuSubContent_Shadcn_ className="w-48">
<ContextMenuItem_Shadcn_>
Save Page As...
<ContextMenuShortcut_Shadcn_>⇧⌘S</ContextMenuShortcut_Shadcn_>
</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_>Create Shortcut...</ContextMenuItem_Shadcn_>
<ContextMenuItem_Shadcn_>Name Window...</ContextMenuItem_Shadcn_>
<ContextMenuSeparator_Shadcn_ />
<ContextMenuItem_Shadcn_>Developer Tools</ContextMenuItem_Shadcn_>
</ContextMenuSubContent_Shadcn_>
</ContextMenuSub_Shadcn_>
<ContextMenuSeparator_Shadcn_ />
<ContextMenuCheckboxItem_Shadcn_ checked>
Show Bookmarks Bar
<ContextMenuShortcut_Shadcn_>⌘⇧B</ContextMenuShortcut_Shadcn_>
</ContextMenuCheckboxItem_Shadcn_>
<ContextMenuCheckboxItem_Shadcn_>Show Full URLs</ContextMenuCheckboxItem_Shadcn_>
<ContextMenuSeparator_Shadcn_ />
<ContextMenuRadioGroup_Shadcn_ value="pedro">
<ContextMenuLabel_Shadcn_ inset>People</ContextMenuLabel_Shadcn_>
<ContextMenuSeparator_Shadcn_ />
<ContextMenuRadioItem_Shadcn_ value="pedro">Pedro Duarte</ContextMenuRadioItem_Shadcn_>
<ContextMenuRadioItem_Shadcn_ value="colm">Colm Tuite</ContextMenuRadioItem_Shadcn_>
</ContextMenuRadioGroup_Shadcn_>
</ContextMenuContent_Shadcn_>
</ContextMenu_Shadcn_>
)
}
Installation
npx shadcn-ui@latest add context-menu
Usage
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
} from '@/components/ui/context-menu'
<ContextMenu>
<ContextMenuTrigger>Right click</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem>Profile</ContextMenuItem>
<ContextMenuItem>Billing</ContextMenuItem>
<ContextMenuItem>Team</ContextMenuItem>
<ContextMenuItem>Subscription</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>