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.