Context Menu

Displays a menu of actions triggered by a right click.

Installation#

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/ContextMenu
Copy

Usage#

Copy<ContextMenu>
  <ContextMenu.Trigger> {"Right click here"->React.string} </ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item> {"Profile"->React.string} </ContextMenu.Item>
    <ContextMenu.Item> {"Billing"->React.string} </ContextMenu.Item>
    <ContextMenu.Item> {"Team"->React.string} </ContextMenu.Item>
    <ContextMenu.Item> {"Subscription"->React.string} </ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu>

Examples#

Basic#

A simple context menu with a few actions.

Submenu#

Use ContextMenuSub to nest secondary actions.

Shortcuts#

Add ContextMenuShortcut to show keyboard hints.

Groups#

Group related actions and separate them with dividers.

Icons#

Combine icons with labels for quick scanning.

Checkboxes#

Use ContextMenuCheckboxItem for toggles.

Radio#

Use ContextMenuRadioItem for exclusive choices.

Destructive#

Use variant=Destructive to style the menu item as destructive.

Sides#

Control submenu placement with side and align props.

API Reference#

See the Base UI documentation for more information.