ContextMenu

The ContextMenu component provides a context-sensitive menu that appears on right-click (web) or long-press (mobile) with customizable actions.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽¹⁾

Properties

⁽¹¹⁾

Playground

Basic Usage

Wrap any trigger element with ContextMenu and pass an items array. The menu opens on right-click (web) or long-press (mobile); the children render prop receives the handlers to spread onto your trigger.

Loading demo…

import
 
{
 
ContextMenu
,
 
Card
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
ITEMS
 
=
 
[
  
{
 id
:
 
'copy'
,
 label
:
 
'Copy'
 
}
,
  
{
 id
:
 
'rename'
,
 label
:
 
'Rename'
 
}
,
  
{
 id
:
 
'delete'
,
 label
:
 
'Delete'
,
 danger
:
 
true
 
}
,
]
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<ContextMenu
 
items
=
{
ITEMS
}
>
      
{
(
triggerProps
)
 
=>
 
(
        
<Card
 
{
.
.
.
triggerProps
}
 
style
=
{
{
 padding
:
 
24
,
 alignItems
:
 
'center'
 
}
}
>
          
<Text
 
variant
=
"p"
>
Right
-
click or long
-
press me
</Text
>
        
</Card
>
      
)
}
    
</ContextMenu
>
  
)
;
}

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap