ComponentsCore
Context Menu
Instantly reveals a contextual menu at the precise location of your right-click, allowing users to quickly interact with actions that are relevant to the current element or interface state.
Example
Right click anywhere in this box
Usage
Installation
Required Component
This component depends on Popover and Dropdown Menu. Make sure you have installed and configured it before using this component.Popover
A popover is a floating overlay element that appears next to a trigger element, providing additional contextual information or actions without navigating away from the current page.
Dropdown Menu
A component that reveals a list of options when activated, allowing users to select one or multiple items.
Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add context-menuAnatomy
import {
ContextMenu,
ContextMenuContent,
ContextMenuTrigger,
ContextMenuItem,
ContextMenuLabel,
ContextMenuDescription,
ContextMenuSeparator,
ContextMenuGroup,
ContextMenuShortcut,
ContextMenuSub,
ContextMenuSubTrigger,
ContextMenuSubContent,
} from "@/components/ui/core/context-menu";<ContextMenu>
<ContextMenuTrigger className="h-36 w-72 border-2 border-dashed rounded-xl flex items-center justify-center text-sm text-muted-foreground">
Right click anywhere in this box
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem>ITEM GOES HERE</ContextMenuItem>
<ContextMenuItem>ITEM GOES HERE</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>ITEM GOES HERE</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>Another Example
With Card
A context menu where the trigger element is implemented using a Card component, allowing the menu to be activated by interacting with the card UI.
“Hey, are we still on for tomorrow’s meeting at 10 AM?”
10:21 AMUsage
Props
Loading types…