Context Menu

Displays a menu of actions triggered by a right click.

@react.component
let make = () =>
  <ContextMenu>

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.

@react.component
let make = () =>
  <ContextMenu>

Submenu#

Use ContextMenuSub to nest secondary actions.

@react.component
let make = () =>
  <ContextMenu>

Shortcuts#

Add ContextMenuShortcut to show keyboard hints.

@react.component
let make = () =>
  <ContextMenu>

Groups#

Group related actions and separate them with dividers.

@react.component
let make = () =>
  <ContextMenu>

Icons#

Combine icons with labels for quick scanning.

@react.component
let make = () =>
  <ContextMenu>

Checkboxes#

Use ContextMenuCheckboxItem for toggles.

@react.component
let make = () =>
  <ContextMenu>

Radio#

Use ContextMenuRadioItem for exclusive choices.

@@directive("'use client'")

@react.component

Destructive#

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

@react.component
let make = () =>
  <ContextMenu>

Sides#

Control submenu placement with side and align props.

@react.component
let make = () =>
  <div className="grid w-full max-w-sm grid-cols-2 gap-4">

API Reference#

See the Base UI documentation for more information.