Displaying Material-UI Menu on Right Click | okaryo.log

Displaying Material-UI Menu on Right Click



Recently, I implemented the functionality to display a MaterialUI Menu on right click in my personal project.

As this was my first time working with right-click control, I decided to summarize the implementation in this blog post.

Right-Click Callback

To control the event when a component is right-clicked, you can use the onContextMenu callback, which is not specific to Material-UI but commonly used. Here’s an example of using onContextMenu with raw JavaScript:

noContext.addEventListener('contextmenu', e => {})

Considerations when using onContextMenu

When using onContextMenu as is, the browser’s default context menu will be displayed on right-click, as shown below:


To prevent the default behavior, you can use the preventDefault() method:

const onRightClick = (event: React.MouseEvent<HTMLElement>) => {
  // Perform desired actions

Displaying Menu on Right Click

Now that we have covered right-click control, we can combine it with the general usage of the Menu component to achieve the desired functionality.

const [menuAnchorElement, setMenuAnchorElement] = useState<HTMLElement | null>(null);
const onRightClick = (event: React.MouseEvent<HTMLElement>) => {
const onCloseMenu = () => {

return (
    <Button onContextMenu={onRightClick}>
      Right Click Target
      <MenuItem onClick={onCloseMenu}>Item</MenuItem>


The above example demonstrates displaying a menu on right-click. However, implementing right-click functionality may not be immediately noticeable to users from a UI perspective. It might be a good idea to consider additional enhancements or alternative approaches to make it more user-friendly and discoverable.

When implementing right-click functionality, it is important to think about ways to encourage users to utilize the feature or explore alternative methods.

Related Posts
Related Posts

This site uses Google Analytics.