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
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.
TypeScript
JavaScript
Copy and paste the following code into your project.
TypeScript
JavaScript
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.
Props
Loading types…