context-menu

Context Menu

A menu that opens on right-click, with actions, checkbox and radio items, labelled groups and destructive entries.

States: Default, Focus, Disabled

Parts

Part	File	Does
ContextMenu	ContextMenu.vue	Groups all parts of the context menu, which opens on right-click.
ContextMenuCheckboxItem	ContextMenuCheckboxItem.vue	Lets the user switch an option on or off from the menu.
ContextMenuContent	ContextMenuContent.vue	Holds the items the context menu shows while open.
ContextMenuGroup	ContextMenuGroup.vue	Groups related items in the context menu.
ContextMenuItem	ContextMenuItem.vue	Holds one action the user can pick from the context menu.
ContextMenuLabel	ContextMenuLabel.vue	Labels a group of items in the context menu.
ContextMenuPortal	ContextMenuPortal.vue	Places the menu content above the rest of the page.
ContextMenuRadioGroup	ContextMenuRadioGroup.vue	Groups radio items so the user can pick exactly one.
ContextMenuRadioItem	ContextMenuRadioItem.vue	Lets the user choose one option from a group in the menu.
ContextMenuSeparator	ContextMenuSeparator.vue	Separates groups of items in the context menu.
ContextMenuShortcut	ContextMenuShortcut.vue	Shows the keyboard shortcut for a menu item.
ContextMenuSub	ContextMenuSub.vue	Groups a submenu trigger with the submenu it opens.
ContextMenuSubContent	ContextMenuSubContent.vue	Holds the items of a submenu while it is open.
ContextMenuSubTrigger	ContextMenuSubTrigger.vue	Opens a submenu from an item of the context menu.
ContextMenuTrigger	ContextMenuTrigger.vue	Marks the area where a right-click opens the context menu.

Anatomy

<ContextMenu>
  <ContextMenuTrigger />
  <ContextMenuContent>
    <ContextMenuItem />
    <ContextMenuSeparator />
  </ContextMenuContent>
</ContextMenu>

Styling

Part	Recipe
ContextMenuCheckboxItem	context-menu-item
ContextMenuContent	context-menu-content
ContextMenuItem	context-menu-item
ContextMenuLabel	context-menu-label
ContextMenuRadioItem	context-menu-item
ContextMenuSeparator	context-menu-separator
ContextMenuShortcut	context-menu-shortcut
ContextMenuSubContent	context-menu-sub-content
ContextMenuSubTrigger	context-menu-sub-trigger

Install

Writes 16 files into components/ui/context-menu/. For agents, npx @frontic/ui docs context-menu prints this reference as markdown; the MCP server serves the same.