Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Context Menu
A menu that appears on right-click, providing contextual actions relevant to the element the user interacted with. Use for file browsers, data tables, canvas editors, and any interface where contextual options enhance productivity.
Default
Right-click inside the dashed trigger area to open the
ContextMenu. This example shows a browser-style context menu with ContextMenuItem entries, ContextMenuShortcut hints, and a ContextMenuSeparator divider. Disabled items like Forward appear muted and are skipped during keyboard navigation.
Loading example…
With Icons
Place
LucideIcon components inside ContextMenuItem to add visual icons alongside menu text. Use mr-2 h-4 w-4 classes on the icon for consistent spacing. Apply text-destructive to the item for dangerous actions like delete.
Loading example…
With Groups and Labels
Use
ContextMenuLabel with ContextMenuSeparator to organize items into named sections. The Inset parameter on ContextMenuLabel adds left padding for alignment with icon-bearing items. This pattern helps users scan long menus and find related actions quickly.
Loading example…
Custom Variant
Use the
Class parameter on ContextMenuContent to apply custom Tailwind CSS for project-specific styling. This example uses a custom background colour and border to create a branded context menu that matches your application's design system.
Loading example…