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.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.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.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.Submenus and Radio Items
BbContextMenuSub groups a trigger and a nested panel. Bind the radio group to keep one option selected. Arrow keys enter and leave the submenu; selecting a radio item closes the menu by default.Checkbox Items
BbContextMenuCheckboxItem binds a boolean checked state. It keeps the menu open by default; set CloseOnSelect="true" to dismiss it after a change.