ContextMenu

An enterprise-level context menu component based on BrConfigProvider for global theme configuration. It supports right-click triggering, nested submenus, adaptive positioning, and can seamlessly integrate with components like BrTable, BrTree, and BrCard. It also supports custom shortcut keys and full keyboard navigation.

Features

• 🖱️ Native Right-Click Hijacking: Perfectly replaces the browser's default context menu, providing a consistent UI experience.
• 📋 Nested Submenus: Supports infinitely nested submenus, suitable for complex hierarchical structures.
• ⌨️ Keyboard Accessibility: Fully supports keyboard navigation (up, down, left, right) and Esc to close, complying with W3C standards.
• 🎯 Adaptive Positioning: Automatically calculates the position based on the overlay engine to prevent the menu from being obscured at the edge of the screen.
• 🎨 Theme Customization: Supports global theme customization based on BrConfigProvider, as well as local style overrides using TailwindCSS.

Basic Usage

Right-click within the area to display a basic operation menu, containing normal items, disabled items, and shortcut key annotations.

Right-click here (Right click here)

Example

Nested Submenus

Supports multi-level nested submenus and automatically handles edge overflow issues.

Right-click to open nested menu (Right click to open nested menu)

Example

Integration with Card

Bind right-click operations to cards or complex areas. You can use as-child to merge the trigger properties onto custom components.

Breeze UI Project (Breeze UI Project)

Right-click the card to view actions (Right click card to see actions)

The current project contains various enterprise-level UI Components。 (This project contains various enterprise-level UI components.)

Example

Table Row Operations

Demonstrates how to seamlessly integrate the context menu with a data table, binding right-click events to each row.

Project Name (Project Name)	Status (Status)
Breeze-Core	Active
Breeze-Vue	Developing

Example

Theme Customization

The style of BrContextMenu is fully integrated with the BrConfigProvider system. You can adjust its appearance globally or locally by configuring CSS variables.

Right-click to view custom theme (Right click to view custom theme)

Example

API Reference

BrContextMenu

The root component that wraps the entire context menu, responsible for managing the right-click state and events.

Property	Type	Default	Description
dir	'ltr' | 'rtl'	'ltr'	The reading direction of the menu
modal	boolean	true	Whether it is modal (prevents outside interaction when open)

Event	Type	Description
@update:open	(open: boolean) => void	Triggered when the menu opens or closes

BrContextMenuTrigger

The area that triggers the menu.

Property	Type	Default	Description
asChild	boolean	false	Whether to pass the trigger properties to the child element, used to replace the default wrapper span/div
class	any	-	Custom class name

BrContextMenuContent

The container for the menu content after right-clicking.

Property	Type	Default	Description
alignOffset	number	0	Alignment offset
avoidCollisions	boolean	true	Whether to automatically avoid screen edges
collisionBoundary	Element | Element[]	[]	Collision detection boundary
collisionPadding	number | Record	0	Collision detection padding
loop	boolean	false	Whether keyboard navigation loops
class	any	-	Container class name

BrContextMenuItem

A single menu item.

Property	Type	Default	Description
disabled	boolean	false	Whether it is disabled
textValue	string	-	Text used for first-letter matching in keyboard navigation
shortcut	string	-	Shortcut key display text (e.g., ⌘P)
inset	boolean	false	Whether to display indented (usually used to align items with icons)
class	any	-	Menu item class name

Event	Type	Description
@select	(event: Event) => void	Triggered when selected. Can call event.preventDefault() to prevent default closing behavior

BrContextMenuSub & BrContextMenuSubTrigger & BrContextMenuSubContent

Used to build nested submenus. Their properties are basically equivalent to the corresponding root container components, with added support for hover to expand/collapse.

BrContextMenuEmpty & BrContextMenuLoading

Preset placeholder components for handling empty data and asynchronous loading states.

Property	Type	Default	Description
text	string	'No items' / 'Loading...'	Prompt text