Context Menu

A list of options that appears when a user interacts right-clicking on a trigger element.

Import#

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuList,
  ContextMenuItem,
} from '@saas-ui/react'

Usage#

import { Center } from '@chakra-ui/react'
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuList,
  ContextMenuItem,
} from '@saas-ui/react'


export default function Page() {
  return (
    <ContextMenu>
      <ContextMenuTrigger>
        <Center height="200px" borderWidth="1px">
          Right click here
        </Center>
      </ContextMenuTrigger>
      <ContextMenuList>
        <ContextMenuItem>Edit</ContextMenuItem>
        <ContextMenuItem>Copy</ContextMenuItem>
        <ContextMenuItem>Delete</ContextMenuItem>
      </ContextMenuList>
    </ContextMenu>
  )
}

Was this helpful?