Menu

A menu component based on BrConfigProvider global theme configuration, replicating the shadcn-vue design system. It supports multi-level nesting, shortcut annotations, and keyboard navigation. This component is primarily used to implement context menus (Right-click Context Menu).

Core Features

• Theme Adaptation: Deeply integrated with BrConfigProvider, supporting CSS variables to configure background, foreground, radius, shadow, etc.
• Multi-level Nesting: Supports infinite levels of nested submenus.
• Keyboard Navigation: Fully supports Tab, Arrow Up/Down/Left/Right, Enter, Esc, and other key operations.
• Shortcuts: Supports menu item shortcut annotations.
• Group Separators: Supports menu groups and separators.
• Collision Detection: Automatically adjusts the pop-up position to prevent overflowing the viewport.

Basic Usage

The simplest context menu containing a few basic operations.

Right click here

Example

Complex Menu

A complex context menu supporting groups, icons, shortcuts, and multi-level nesting, as shown in the preview.

Right-click in this area (Right click here)

Example

Nested Submenus

Support creating multi-level submenus using BrMenuSub.

Right click for Submenu

Example

Shortcut Annotations

Use the shortcut slot or property to display keyboard shortcuts.

Right click for Shortcuts

Example

Theming

BrMenu uses CSS variables from BrConfigProvider for style customization.

Configure global styles through the theme property of BrConfigProvider:

Right click (Dark Theme Menu)

Example

API Reference

BrMenu (Root)

Property	Type	Default	Description
dir	'ltr' | 'rtl'	-	Reading direction

BrMenuTrigger

Property	Type	Default	Description
disabled	boolean	false	Whether the trigger is disabled

BrMenuContent

Property	Type	Default	Description
loop	boolean	false	Whether keyboard navigation should loop
alignOffset	number	-	Alignment offset

BrMenuItem

Property	Type	Default	Description
disabled	boolean	false	Whether disabled
inset	boolean	false	Whether to leave space for left icon
shortcut	string	-	Shortcut text

BrMenuSub

Property	Type	Default	Description
defaultOpen	boolean	false	Default open state
open	boolean	-	Controlled open state