Build faster with Premium Chakra UI Components 💎
Learn moreOctober 19, 2024
A context menu provides users with a convenient way to access actions related to a specific UI element through a right-click.
Utilize the MenuContextTrigger
component to create a context menu.
import { Center, Menu, Portal } from "@chakra-ui/react"
const Demo = () => {
return (
<Menu.Root>
<Menu.ContextTrigger width="full">
<Center
height="40"
userSelect="none"
borderWidth="2px"
borderStyle="dashed"
rounded="lg"
padding="4"
>
Right click here
</Center>
</Menu.ContextTrigger>
<Portal>
<Menu.Positioner>
<Menu.Content>
<Menu.Item value="new-txt">New Text File</Menu.Item>
<Menu.Item value="new-file">New File...</Menu.Item>
<Menu.Item value="new-win">New Window</Menu.Item>
<Menu.Item value="open-file">Open File...</Menu.Item>
<Menu.Item value="export">Export</Menu.Item>
</Menu.Content>
</Menu.Positioner>
</Portal>
</Menu.Root>
)
}
For more details on Chakra UI's menu components, refer to the documentation.